Hugging Face's logo

Spaces:
ajay7556
/
dfdsfsd
Running

App Files Community
ajay7556 commited on
Commit
d15cbb6
·
verified ·
1 Parent(s): f3d810b

create a find jobs page - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1080 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dfdsfsd
3
- emoji: 🔥
4
- colorFrom: gray
5
- colorTo: yellow
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: dfdsfsd
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,1080 @@
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>BizConnect - Start Your Business or Find Jobs</title>
7
+ <script src="https://cdn.tailwindcss.com/3.4.16"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: '#3b82f6',
14
+ secondary: '#10b981',
15
+ dark: '#1f2937'
16
+ },
17
+ borderRadius: {
18
+ 'none': '0px',
19
+ 'sm': '4px',
20
+ DEFAULT: '8px',
21
+ 'md': '12px',
22
+ 'lg': '16px',
23
+ 'xl': '20px',
24
+ '2xl': '24px',
25
+ '3xl': '32px',
26
+ 'full': '9999px',
27
+ 'button': '8px'
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ <link rel="preconnect" href="https://fonts.googleapis.com">
34
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35
+ <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
36
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
37
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
38
+ <style>
39
+ :where([class^="ri-"])::before {
40
+ content: "\f3c2";
41
+ }
42
+ body {
43
+ font-family: 'Inter', sans-serif;
44
+ scroll-behavior: smooth;
45
+ }
46
+ .hero-section {
47
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
48
+ background-size: cover;
49
+ background-position: center;
50
+ background-attachment: fixed;
51
+ }
52
+ .custom-select {
53
+ appearance: none;
54
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
55
+ background-repeat: no-repeat;
56
+ background-position: right 0.5rem center;
57
+ background-size: 1.5em 1.5em;
58
+ }
59
+ .toggle-checkbox:checked {
60
+ right: 0;
61
+ border-color: #3b82f6;
62
+ }
63
+ .toggle-checkbox:checked + .toggle-label {
64
+ background-color: #3b82f6;
65
+ }
66
+ .mobile-menu {
67
+ max-height: 0;
68
+ overflow: hidden;
69
+ transition: max-height 0.3s ease-out;
70
+ }
71
+ .mobile-menu.open {
72
+ max-height: 500px;
73
+ }
74
+ .modal {
75
+ opacity: 0;
76
+ visibility: hidden;
77
+ transition: all 0.3s ease;
78
+ }
79
+ .modal.active {
80
+ opacity: 1;
81
+ visibility: visible;
82
+ }
83
+ .form-input:focus {
84
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
85
+ }
86
+ .job-card:hover {
87
+ transform: translateY(-5px);
88
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
89
+ }
90
+ .animate-bounce {
91
+ animation: bounce 2s infinite;
92
+ }
93
+ @keyframes bounce {
94
+ 0%, 100% {
95
+ transform: translateY(-5%);
96
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
97
+ }
98
+ 50% {
99
+ transform: translateY(0);
100
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
101
+ }
102
+ }
103
+ .smooth-transition {
104
+ transition: all 0.3s ease;
105
+ }
106
+ </style>
107
+ </head>
108
+ <body class="bg-gray-50">
109
+ <!-- Header -->
110
+ <header class="bg-white shadow-sm sticky top-0 z-50">
111
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
112
+ <div class="flex items-center">
113
+ <a href="#" class="text-2xl font-bold text-primary flex items-center">
114
+ <i class="ri-lightbulb-flash-line text-3xl mr-2"></i>
115
+ BizConnect
116
+ </a>
117
+ <nav class="hidden md:flex ml-10 space-x-8">
118
+ <a href="#home" class="text-gray-700 hover:text-primary font-medium smooth-transition">Home</a>
119
+ <a href="#features" class="text-gray-700 hover:text-primary font-medium smooth-transition">Features</a>
120
+ <a href="#business" class="text-gray-700 hover:text-primary font-medium smooth-transition">Business</a>
121
+ <a href="#jobs" class="text-gray-700 hover:text-primary font-medium smooth-transition">Jobs</a>
122
+ <a href="#pricing" class="text-gray-700 hover:text-primary font-medium smooth-transition">Pricing</a>
123
+ </nav>
124
+ </div>
125
+ <div class="flex items-center space-x-4">
126
+ <div class="relative hidden md:block">
127
+ <select class="custom-select pr-8 py-2 pl-3 border border-gray-300 !rounded-button text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm">
128
+ <option value="en">English</option>
129
+ <option value="es">Español</option>
130
+ <option value="fr">Français</option>
131
+ <option value="de">Deutsch</option>
132
+ <option value="hi">हिन्दी</option>
133
+ </select>
134
+ </div>
135
+ <button onclick="openLoginModal()" class="bg-white text-primary border border-primary px-4 py-2 !rounded-button hover:bg-gray-50 font-medium text-sm whitespace-nowrap smooth-transition">Log In</button>
136
+ <button onclick="openRegisterModal()" class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-primary/90 font-medium text-sm whitespace-nowrap smooth-transition">Register</button>
137
+ <button id="mobileMenuButton" class="md:hidden flex items-center justify-center w-10 h-10">
138
+ <i class="ri-menu-line ri-lg"></i>
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Mobile Menu -->
144
+ <div id="mobileMenu" class="mobile-menu md:hidden bg-white shadow-md">
145
+ <div class="container mx-auto px-4 py-3">
146
+ <nav class="flex flex-col space-y-3">
147
+ <a href="#home" class="text-gray-700 hover:text-primary font-medium py-2 smooth-transition">Home</a>
148
+ <a href="#features" class="text-gray-700 hover:text-primary font-medium py-2 smooth-transition">Features</a>
149
+ <a href="#business" class="text-gray-700 hover:text-primary font-medium py-2 smooth-transition">Business</a>
150
+ <a href="#jobs" class="text-gray-700 hover:text-primary font-medium py-2 smooth-transition">Jobs</a>
151
+ <a href="#pricing" class="text-gray-700 hover:text-primary font-medium py-2 smooth-transition">Pricing</a>
152
+ <div class="pt-2 border-t border-gray-200">
153
+ <select class="custom-select w-full pr-8 py-2 pl-3 border border-gray-300 !rounded-button text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm">
154
+ <option value="en">English</option>
155
+ <option value="es">Español</option>
156
+ <option value="fr">Français</option>
157
+ <option value="de">Deutsch</option>
158
+ <option value="hi">हिन्दी</option>
159
+ </select>
160
+ </div>
161
+ </nav>
162
+ </div>
163
+ </div>
164
+ </header>
165
+
166
+ <!-- Hero Section -->
167
+ <section id="home" class="hero-section relative">
168
+ <div class="container mx-auto px-4 py-20 md:py-32 relative">
169
+ <div class="w-full max-w-2xl">
170
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">Build Your Business Empire with Minimal Resources</h1>
171
+ <p class="text-lg text-white/90 mb-8">Launch your dream business or find the perfect job opportunity. Connect, collaborate, and grow with our all-in-one platform designed for entrepreneurs and professionals.</p>
172
+ <div class="flex flex-col sm:flex-row gap-4">
173
+ <button onclick="openBusinessModal()" class="bg-primary text-white px-6 py-3 !rounded-button hover:bg-primary/90 font-medium text-base whitespace-nowrap flex items-center justify-center smooth-transition">
174
+ <i class="ri-rocket-line mr-2"></i>
175
+ Start Your Business
176
+ </button>
177
+ <button onclick="openJobModal()" class="bg-white text-primary border border-primary px-6 py-3 !rounded-button hover:bg-gray-50 font-medium text-base whitespace-nowrap flex items-center justify-center smooth-transition">
178
+ <i class="ri-briefcase-line mr-2"></i>
179
+ Find Jobs
180
+ </button>
181
+ </div>
182
+ <div class="mt-8 flex items-center">
183
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded-full">First Month Free</span>
184
+ <span class="ml-3 text-sm text-white/90">No credit card required</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Stats Section -->
191
+ <section class="py-12 bg-white">
192
+ <div class="container mx-auto px-4">
193
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
194
+ <div class="p-4">
195
+ <div class="text-3xl md:text-4xl font-bold text-primary mb-2">10K+</div>
196
+ <div class="text-gray-600">Businesses Started</div>
197
+ </div>
198
+ <div class="p-4">
199
+ <div class="text-3xl md:text-4xl font-bold text-secondary mb-2">50K+</div>
200
+ <div class="text-gray-600">Jobs Posted</div>
201
+ </div>
202
+ <div class="p-4">
203
+ <div class="text-3xl md:text-4xl font-bold text-primary mb-2">100K+</div>
204
+ <div class="text-gray-600">Community Members</div>
205
+ </div>
206
+ <div class="p-4">
207
+ <div class="text-3xl md:text-4xl font-bold text-secondary mb-2">95%</div>
208
+ <div class="text-gray-600">Success Rate</div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Features Section -->
215
+ <section id="features" class="py-16 bg-gray-50">
216
+ <div class="container mx-auto px-4">
217
+ <div class="text-center mb-16">
218
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-primary bg-primary/10 rounded-full mb-4">FEATURES</span>
219
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Everything You Need to Succeed</h2>
220
+ <p class="text-gray-600 max-w-2xl mx-auto">Our platform provides all the tools and resources you need to start, manage, and grow your business or advance your career.</p>
221
+ </div>
222
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
223
+ <!-- Feature 1 -->
224
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
225
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
226
+ <i class="ri-store-3-line text-primary ri-xl"></i>
227
+ </div>
228
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Business Creation</h3>
229
+ <p class="text-gray-600 mb-4">Set up your business in minutes with our step-by-step wizard. Choose your business type, input basic information, and start operating immediately.</p>
230
+ <a href="#" class="text-primary font-medium flex items-center smooth-transition">
231
+ Learn more <i class="ri-arrow-right-line ml-1"></i>
232
+ </a>
233
+ </div>
234
+ <!-- Feature 2 -->
235
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
236
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
237
+ <i class="ri-team-line text-secondary ri-xl"></i>
238
+ </div>
239
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Team Building</h3>
240
+ <p class="text-gray-600 mb-4">Find and hire the perfect talent for your business. Post jobs, review applications, and build your dream team with our integrated job portal.</p>
241
+ <a href="#" class="text-primary font-medium flex items-center smooth-transition">
242
+ Learn more <i class="ri-arrow-right-line ml-1"></i>
243
+ </a>
244
+ </div>
245
+ <!-- Feature 3 -->
246
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
247
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
248
+ <i class="ri-chat-3-line text-purple-600 ri-xl"></i>
249
+ </div>
250
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Communication Hub</h3>
251
+ <p class="text-gray-600 mb-4">Connect with your team and clients through our integrated chat system. Create channels, manage conversations, and build your community.</p>
252
+ <a href="#" class="text-primary font-medium flex items-center smooth-transition">
253
+ Learn more <i class="ri-arrow-right-line ml-1"></i>
254
+ </a>
255
+ </div>
256
+ <!-- Feature 4 -->
257
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
258
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
259
+ <i class="ri-book-open-line text-yellow-600 ri-xl"></i>
260
+ </div>
261
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Resource Center</h3>
262
+ <p class="text-gray-600 mb-4">Access industry-specific guides, training materials, templates, and tools to help you grow your business and improve your skills.</p>
263
+ <a href="#" class="text-primary font-medium flex items-center smooth-transition">
264
+ Learn more <i class="ri-arrow-right-line ml-1"></i>
265
+ </a>
266
+ </div>
267
+ <!-- Feature 5 -->
268
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
269
+ <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
270
+ <i class="ri-community-line text-red-600 ri-xl"></i>
271
+ </div>
272
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Community Building</h3>
273
+ <p class="text-gray-600 mb-4">Connect with like-minded entrepreneurs and professionals. Share knowledge, collaborate on projects, and grow together.</p>
274
+ <a href="#" class="text-primary font-medium flex items-center smooth-transition">
275
+ Learn more <i class="ri-arrow-right-line ml-1"></i>
276
+ </a>
277
+ </div>
278
+ <!-- Feature 6 -->
279
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
280
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
281
+ <i class="ri-dashboard-line text-indigo-600 ri-xl"></i>
282
+ </div>
283
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Business Management</h3>
284
+ <p class="text-gray-600 mb-4">Track projects, manage resources, monitor performance, and make data-driven decisions with our comprehensive management tools.</p>
285
+ <a href="#" class="text-primary font-medium flex items-center smooth-transition">
286
+ Learn more <i class="ri-arrow-right-line ml-1"></i>
287
+ </a>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- How It Works Section -->
294
+ <section class="py-16 bg-white">
295
+ <div class="container mx-auto px-4">
296
+ <div class="text-center mb-16">
297
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-secondary bg-secondary/10 rounded-full mb-4">HOW IT WORKS</span>
298
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Get Started in 3 Simple Steps</h2>
299
+ <p class="text-gray-600 max-w-2xl mx-auto">Begin your journey to business success or career advancement with our easy onboarding process.</p>
300
+ </div>
301
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
302
+ <!-- Step 1 -->
303
+ <div class="flex flex-col items-center text-center p-6 bg-gray-50 rounded-lg smooth-transition hover:shadow-md">
304
+ <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-6 text-2xl font-bold animate-bounce">1</div>
305
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Register Your Account</h3>
306
+ <p class="text-gray-600">Create your account in minutes. Choose whether you're starting a business or looking for job opportunities.</p>
307
+ </div>
308
+ <!-- Step 2 -->
309
+ <div class="flex flex-col items-center text-center p-6 bg-gray-50 rounded-lg smooth-transition hover:shadow-md">
310
+ <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-6 text-2xl font-bold animate-bounce" style="animation-delay: 0.2s">2</div>
311
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Set Up Your Profile</h3>
312
+ <p class="text-gray-600">Complete your profile with relevant information about your business or professional skills and experience.</p>
313
+ </div>
314
+ <!-- Step 3 -->
315
+ <div class="flex flex-col items-center text-center p-6 bg-gray-50 rounded-lg smooth-transition hover:shadow-md">
316
+ <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-6 text-2xl font-bold animate-bounce" style="animation-delay: 0.4s">3</div>
317
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Start Growing</h3>
318
+ <p class="text-gray-600">Begin building your business, hiring team members, or applying for jobs. Access resources and connect with the community.</p>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- Business Section -->
325
+ <section id="business" class="py-16 bg-gray-50">
326
+ <div class="container mx-auto px-4">
327
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
328
+ <div>
329
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-primary bg-primary/10 rounded-full mb-4">FOR ENTREPRENEURS</span>
330
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Launch and Grow Your Business</h2>
331
+ <p class="text-gray-600 mb-8">Our comprehensive platform provides all the tools you need to start, manage, and scale your business efficiently. From business registration to team management, we've got you covered.</p>
332
+
333
+ <div class="space-y-6">
334
+ <div class="flex items-start">
335
+ <div class="flex-shrink-0">
336
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary/10 text-primary">
337
+ <i class="ri-check-line"></i>
338
+ </div>
339
+ </div>
340
+ <div class="ml-4">
341
+ <h4 class="text-lg font-medium text-gray-900">Business Registration</h4>
342
+ <p class="text-gray-600 mt-1">Legally register your business in minutes with our streamlined process.</p>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="flex items-start">
347
+ <div class="flex-shrink-0">
348
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary/10 text-primary">
349
+ <i class="ri-check-line"></i>
350
+ </div>
351
+ </div>
352
+ <div class="ml-4">
353
+ <h4 class="text-lg font-medium text-gray-900">Financial Tools</h4>
354
+ <p class="text-gray-600 mt-1">Manage invoices, expenses, and taxes with our integrated financial dashboard.</p>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="flex items-start">
359
+ <div class="flex-shrink-0">
360
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary/10 text-primary">
361
+ <i class="ri-check-line"></i>
362
+ </div>
363
+ </div>
364
+ <div class="ml-4">
365
+ <h4 class="text-lg font-medium text-gray-900">Marketing Solutions</h4>
366
+ <p class="text-gray-600 mt-1">Create professional marketing materials and campaigns to attract customers.</p>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <button onclick="openBusinessModal()" class="mt-8 bg-primary text-white px-6 py-3 !rounded-button hover:bg-primary/90 font-medium whitespace-nowrap flex items-center smooth-transition">
372
+ <i class="ri-rocket-line mr-2"></i>
373
+ Start Your Business
374
+ </button>
375
+ </div>
376
+
377
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
378
+ <div class="p-6">
379
+ <div class="flex items-center mb-6">
380
+ <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mr-4">JD</div>
381
+ <div>
382
+ <h4 class="font-medium text-gray-900">John Doe</h4>
383
+ <p class="text-gray-600 text-sm">Founder, TechSolutions Inc.</p>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
388
+ <div class="flex items-center mb-2">
389
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
390
+ <i class="ri-line-chart-line text-secondary"></i>
391
+ </div>
392
+ <h4 class="font-medium text-gray-900">Business Growth</h4>
393
+ </div>
394
+ <p class="text-gray-600">"Using BizConnect, I was able to scale my business from a solo operation to a team of 15 in just one year. The tools and resources saved me countless hours and helped me focus on growth."</p>
395
+ </div>
396
+
397
+ <div class="grid grid-cols-2 gap-4">
398
+ <div class="bg-blue-50 p-4 rounded-lg">
399
+ <div class="text-2xl font-bold text-primary mb-1">75%</div>
400
+ <div class="text-sm text-gray-600">Revenue Increase</div>
401
+ </div>
402
+ <div class="bg-green-50 p-4 rounded-lg">
403
+ <div class="text-2xl font-bold text-secondary mb-1">15</div>
404
+ <div class="text-sm text-gray-600">Team Members</div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- Job Portal Preview Section -->
414
+ <section id="jobs" class="py-16 bg-white">
415
+ <div class="container mx-auto px-4">
416
+ <div class="text-center mb-16">
417
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-secondary bg-secondary/10 rounded-full mb-4">CAREER OPPORTUNITIES</span>
418
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Find Jobs or Hire Talent</h2>
419
+ <p class="text-gray-600 max-w-2xl mx-auto">Our integrated job portal connects businesses with skilled professionals. Post jobs, apply for positions, and build your team or advance your career.</p>
420
+ </div>
421
+
422
+ <div class="mb-12">
423
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8">
424
+ <h3 class="text-2xl font-bold text-gray-900 mb-4 md:mb-0">Featured Job Openings</h3>
425
+ <div class="relative w-full md:w-64">
426
+ <select class="custom-select w-full pr-8 py-2 pl-3 border border-gray-300 !rounded-button text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm">
427
+ <option value="">All Categories</option>
428
+ <option value="tech">Technology</option>
429
+ <option value="marketing">Marketing</option>
430
+ <option value="finance">Finance</option>
431
+ <option value="design">Design</option>
432
+ <option value="hr">Human Resources</option>
433
+ </select>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
438
+ <!-- Job Card 1 -->
439
+ <div class="job-card bg-white p-6 rounded-lg shadow-sm border border-gray-100 smooth-transition hover:border-primary/30">
440
+ <div class="flex items-start mb-4">
441
+ <div class="w-12 h-12 rounded-md bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
442
+ <i class="ri-computer-line text-xl"></i>
443
+ </div>
444
+ <div>
445
+ <h4 class="font-bold text-gray-900">Frontend Developer</h4>
446
+ <p class="text-gray-600 text-sm">TechSolutions Inc.</p>
447
+ </div>
448
+ </div>
449
+ <div class="flex flex-wrap gap-2 mb-4">
450
+ <span class="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">React</span>
451
+ <span class="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">JavaScript</span>
452
+ <span class="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">CSS</span>
453
+ </div>
454
+ <div class="flex items-center text-sm text-gray-500 mb-4">
455
+ <i class="ri-map-pin-line mr-1"></i>
456
+ <span>Remote</span>
457
+ <i class="ri-money-dollar-circle-line ml-3 mr-1"></i>
458
+ <span>$80k - $100k</span>
459
+ </div>
460
+ <p class="text-gray-600 text-sm mb-4 line-clamp-2">We're looking for a skilled Frontend Developer to join our team and help build amazing user experiences for our clients.</p>
461
+ <button onclick="openJobApplyModal('Frontend Developer')" class="w-full bg-primary text-white py-2 !rounded-button hover:bg-primary/90 font-medium text-sm smooth-transition">Apply Now</button>
462
+ </div>
463
+
464
+ <!-- Job Card 2 -->
465
+ <div class="job-card bg-white p-6 rounded-lg shadow-sm border border-gray-100 smooth-transition hover:border-primary/30">
466
+ <div class="flex items-start mb-4">
467
+ <div class="w-12 h-12 rounded-md bg-green-100 flex items-center justify-center text-green-600 mr-4">
468
+ <i class="ri-bar-chart-line text-xl"></i>
469
+ </div>
470
+ <div>
471
+ <h4 class="font-bold text-gray-900">Marketing Manager</h4>
472
+ <p class="text-gray-600 text-sm">GrowthMarketing Co.</p>
473
+ </div>
474
+ </div>
475
+ <div class="flex flex-wrap gap-2 mb-4">
476
+ <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Digital Marketing</span>
477
+ <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">SEO</span>
478
+ <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Social Media</span>
479
+ </div>
480
+ <div class="flex items-center text-sm text-gray-500 mb-4">
481
+ <i class="ri-map-pin-line mr-1"></i>
482
+ <span>New York, NY</span>
483
+ <i class="ri-money-dollar-circle-line ml-3 mr-1"></i>
484
+ <span>$90k - $120k</span>
485
+ </div>
486
+ <p class="text-gray-600 text-sm mb-4 line-clamp-2">Lead our marketing team to develop and execute strategies that drive customer acquisition and brand awareness.</p>
487
+ <button onclick="openJobApplyModal('Marketing Manager')" class="w-full bg-primary text-white py-2 !rounded-button hover:bg-primary/90 font-medium text-sm smooth-transition">Apply Now</button>
488
+ </div>
489
+
490
+ <!-- Job Card 3 -->
491
+ <div class="job-card bg-white p-6 rounded-lg shadow-sm border border-gray-100 smooth-transition hover:border-primary/30">
492
+ <div class="flex items-start mb-4">
493
+ <div class="w-12 h-12 rounded-md bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
494
+ <i class="ri-pencil-ruler-line text-xl"></i>
495
+ </div>
496
+ <div>
497
+ <h4 class="font-bold text-gray-900">UX Designer</h4>
498
+ <p class="text-gray-600 text-sm">CreativeDesign Studio</p>
499
+ </div>
500
+ </div>
501
+ <div class="flex flex-wrap gap-2 mb-4">
502
+ <span class="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">UI/UX</span>
503
+ <span class="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Figma</span>
504
+ <span class="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Prototyping</span>
505
+ </div>
506
+ <div class="flex items-center text-sm text-gray-500 mb-4">
507
+ <i class="ri-map-pin-line mr-1"></i>
508
+ <span>San Francisco, CA</span>
509
+ <i class="ri-money-dollar-circle-line ml-3 mr-1"></i>
510
+ <span>$85k - $110k</span>
511
+ </div>
512
+ <p class="text-gray-600 text-sm mb-4 line-clamp-2">Create beautiful and intuitive user experiences for our digital products. Collaborate with developers and product managers.</p>
513
+ <button onclick="openJobApplyModal('UX Designer')" class="w-full bg-primary text-white py-2 !rounded-button hover:bg-primary/90 font-medium text-sm smooth-transition">Apply Now</button>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="text-center mt-8">
518
+ <button onclick="openJobModal()" class="bg-secondary text-white px-6 py-3 !rounded-button hover:bg-secondary/90 font-medium whitespace-nowrap flex items-center mx-auto smooth-transition">
519
+ <i class="ri-search-line mr-2"></i>
520
+ Browse All Jobs
521
+ </button>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </section>
526
+
527
+ <!-- Business Plans Section -->
528
+ <section id="pricing" class="py-16 bg-gray-50">
529
+ <div class="container mx-auto px-4">
530
+ <div class="text-center mb-16">
531
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-primary bg-primary/10 rounded-full mb-4">PRICING</span>
532
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Choose Your Business Plan</h2>
533
+ <p class="text-gray-600 max-w-2xl mx-auto">Select the plan that best fits your business needs. All plans include a free first month to help you get started.</p>
534
+
535
+ <div class="flex items-center justify-center mt-6">
536
+ <span class="text-sm font-medium text-gray-600 mr-3">Monthly</span>
537
+ <div class="relative inline-block w-12 mr-3 align-middle select-none">
538
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
539
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
540
+ </div>
541
+ <span class="text-sm font-medium text-gray-600">Yearly <span class="text-primary">(Save 20%)</span></span>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="flex flex-col md:flex-row gap-8 justify-center">
546
+ <!-- Starter Plan -->
547
+ <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200 flex-1 max-w-md hover:shadow-md smooth-transition">
548
+ <div class="mb-6">
549
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
550
+ <p class="text-gray-600">Perfect for solo entrepreneurs and small startups</p>
551
+ </div>
552
+ <div class="mb-6">
553
+ <span class="text-4xl font-bold text-gray-900">$19</span>
554
+ <span class="text-gray-600">/month</span>
555
+ <p class="text-green-600 font-medium mt-1">First month free</p>
556
+ </div>
557
+ <ul class="mb-8 space-y-3">
558
+ <li class="flex items-start">
559
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
560
+ <span class="text-gray-600">Business setup wizard</span>
561
+ </li>
562
+ <li class="flex items-start">
563
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
564
+ <span class="text-gray-600">Up to 5 team members</span>
565
+ </li>
566
+ <li class="flex items-start">
567
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
568
+ <span class="text-gray-600">Basic communication tools</span>
569
+ </li>
570
+ <li class="flex items-start">
571
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
572
+ <span class="text-gray-600">Access to resource center</span>
573
+ </li>
574
+ <li class="flex items-start">
575
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
576
+ <span class="text-gray-600">Community access</span>
577
+ </li>
578
+ </ul>
579
+ <button onclick="openRegisterModal()" class="w-full bg-primary text-white py-3 !rounded-button hover:bg-primary/90 font-medium whitespace-nowrap smooth-transition">Get Started</button>
580
+ </div>
581
+
582
+ <!-- Professional Plan -->
583
+ <div class="bg-white p-8 rounded-lg shadow-md border-2 border-primary flex-1 max-w-md relative transform scale-105">
584
+ <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-medium rounded-bl-lg rounded-tr-lg">Most Popular</div>
585
+ <div class="mb-6">
586
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Professional</h3>
587
+ <p class="text-gray-600">Ideal for growing businesses and teams</p>
588
+ </div>
589
+ <div class="mb-6">
590
+ <span class="text-4xl font-bold text-gray-900">$49</span>
591
+ <span class="text-gray-600">/month</span>
592
+ <p class="text-green-600 font-medium mt-1">First month free</p>
593
+ </div>
594
+ <ul class="mb-8 space-y-3">
595
+ <li class="flex items-start">
596
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
597
+ <span class="text-gray-600">Everything in Starter</span>
598
+ </li>
599
+ <li class="flex items-start">
600
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
601
+ <span class="text-gray-600">Up to 20 team members</span>
602
+ </li>
603
+ <li class="flex items-start">
604
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
605
+ <span class="text-gray-600">Advanced communication tools</span>
606
+ </li>
607
+ <li class="flex items-start">
608
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
609
+ <span class="text-gray-600">Project management tools</span>
610
+ </li>
611
+ <li class="flex items-start">
612
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
613
+ <span class="text-gray-600">Priority support</span>
614
+ </li>
615
+ </ul>
616
+ <button onclick="openRegisterModal()" class="w-full bg-primary text-white py-3 !rounded-button hover:bg-primary/90 font-medium whitespace-nowrap smooth-transition">Get Started</button>
617
+ </div>
618
+
619
+ <!-- Enterprise Plan -->
620
+ <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200 flex-1 max-w-md hover:shadow-md smooth-transition">
621
+ <div class="mb-6">
622
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
623
+ <p class="text-gray-600">For established businesses with larger teams</p>
624
+ </div>
625
+ <div class="mb-6">
626
+ <span class="text-4xl font-bold text-gray-900">$99</span>
627
+ <span class="text-gray-600">/month</span>
628
+ <p class="text-green-600 font-medium mt-1">First month free</p>
629
+ </div>
630
+ <ul class="mb-8 space-y-3">
631
+ <li class="flex items-start">
632
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
633
+ <span class="text-gray-600">Everything in Professional</span>
634
+ </li>
635
+ <li class="flex items-start">
636
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
637
+ <span class="text-gray-600">Unlimited team members</span>
638
+ </li>
639
+ <li class="flex items-start">
640
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
641
+ <span class="text-gray-600">Advanced analytics</span>
642
+ </li>
643
+ <li class="flex items-start">
644
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
645
+ <span class="text-gray-600">Dedicated account manager</span>
646
+ </li>
647
+ <li class="flex items-start">
648
+ <i class="ri-check-line text-green-500 ri-lg mt-0.5 mr-2"></i>
649
+ <span class="text-gray-600">Custom integrations</span>
650
+ </li>
651
+ </ul>
652
+ <button onclick="openRegisterModal()" class="w-full bg-primary text-white py-3 !rounded-button hover:bg-primary/90 font-medium whitespace-nowrap smooth-transition">Get Started</button>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </section>
657
+
658
+ <!-- Testimonials Section -->
659
+ <section class="py-16 bg-white">
660
+ <div class="container mx-auto px-4">
661
+ <div class="text-center mb-16">
662
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-secondary bg-secondary/10 rounded-full mb-4">TESTIMONIALS</span>
663
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Users Say</h2>
664
+ <p class="text-gray-600 max-w-2xl mx-auto">Hear from entrepreneurs and professionals who have used our platform to grow their businesses and advance their careers.</p>
665
+ </div>
666
+
667
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
668
+ <!-- Testimonial 1 -->
669
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
670
+ <div class="flex items-center mb-4">
671
+ <div class="text-yellow-400 flex">
672
+ <i class="ri-star-fill"></i>
673
+ <i class="ri-star-fill"></i>
674
+ <i class="ri-star-fill"></i>
675
+ <i class="ri-star-fill"></i>
676
+ <i class="ri-star-fill"></i>
677
+ </div>
678
+ </div>
679
+ <p class="text-gray-600 mb-6">"I was able to start my e-commerce business with minimal resources and grow it to a team of 10 in just six months. The platform provided all the tools and resources I needed to succeed."</p>
680
+ <div class="flex items-center">
681
+ <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
682
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Rebecca Thompson" class="w-full h-full object-cover">
683
+ </div>
684
+ <div>
685
+ <h4 class="font-semibold text-gray-900">Rebecca Thompson</h4>
686
+ <p class="text-gray-600 text-sm">Founder, EcoStyle</p>
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <!-- Testimonial 2 -->
692
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
693
+ <div class="flex items-center mb-4">
694
+ <div class="text-yellow-400 flex">
695
+ <i class="ri-star-fill"></i>
696
+ <i class="ri-star-fill"></i>
697
+ <i class="ri-star-fill"></i>
698
+ <i class="ri-star-fill"></i>
699
+ <i class="ri-star-fill"></i>
700
+ </div>
701
+ </div>
702
+ <p class="text-gray-600 mb-6">"As a freelance developer, I found multiple high-quality projects through the job portal. The communication tools made it easy to collaborate with clients and deliver results efficiently."</p>
703
+ <div class="flex items-center">
704
+ <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
705
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="David Patel" class="w-full h-full object-cover">
706
+ </div>
707
+ <div>
708
+ <h4 class="font-semibold text-gray-900">David Patel</h4>
709
+ <p class="text-gray-600 text-sm">Full-Stack Developer</p>
710
+ </div>
711
+ </div>
712
+ </div>
713
+
714
+ <!-- Testimonial 3 -->
715
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md smooth-transition">
716
+ <div class="flex items-center mb-4">
717
+ <div class="text-yellow-400 flex">
718
+ <i class="ri-star-fill"></i>
719
+ <i class="ri-star-fill"></i>
720
+ <i class="ri-star-fill"></i>
721
+ <i class="ri-star-fill"></i>
722
+ <i class="ri-star-fill"></i>
723
+ </div>
724
+ </div>
725
+ <p class="text-gray-600 mb-6">"The resource center was a game-changer for my consulting business. I gained valuable insights and strategies that helped me attract more clients and increase my revenue by 40%."</p>
726
+ <div class="flex items-center">
727
+ <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
728
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer Martinez" class="w-full h-full object-cover">
729
+ </div>
730
+ <div>
731
+ <h4 class="font-semibold text-gray-900">Jennifer Martinez</h4>
732
+ <p class="text-gray-600 text-sm">Business Consultant</p>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </section>
739
+
740
+ <!-- FAQ Section -->
741
+ <section class="py-16 bg-gray-50">
742
+ <div class="container mx-auto px-4">
743
+ <div class="text-center mb-16">
744
+ <span class="inline-block px-3 py-1 text-xs font-semibold text-primary bg-primary/10 rounded-full mb-4">FAQ</span>
745
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
746
+ <p class="text-gray-600 max-w-2xl mx-auto">Find answers to common questions about our platform and services.</p>
747
+ </div>
748
+
749
+ <div class="max-w-3xl mx-auto">
750
+ <!-- FAQ Item 1 -->
751
+ <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
752
+ <button onclick="toggleFAQ(1)" class="flex items-center justify-between w-full p-4 bg-white hover:bg-gray-50 focus:outline-none">
753
+ <h3 class="text-lg font-medium text-gray-900 text-left">How do I start a business with BizConnect?</h3>
754
+ <i class="ri-arrow-down-s-line text-xl text-gray-500 transform transition-transform duration-200" id="faqIcon1"></i>
755
+ </button>
756
+ <div id="faqContent1" class="hidden px-4 pb-4 pt-2 bg-white">
757
+ <p class="text-gray-600">Starting a business with BizConnect is simple. Click on "Start Your Business" and follow our step-by-step wizard. You'll need to provide basic information about your business type, industry, and contact details. Our platform will guide you through the entire process, from registration to setting up your first project.</p>
758
+ </div>
759
+ </div>
760
+
761
+ <!-- FAQ Item 2 -->
762
+ <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
763
+ <button onclick="toggleFAQ(2)" class="flex items-center justify-between w-full p-4 bg-white hover:bg-gray-50 focus:outline-none">
764
+ <h3 class="text-lg font-medium text-gray-900 text-left">Is there a free trial available?</h3>
765
+ <i class="ri-arrow-down-s-line text-xl text-gray-500 transform transition-transform duration-200" id="faqIcon2"></i>
766
+ </button>
767
+ <div id="faqContent2" class="hidden px-4 pb-4 pt-2 bg-white">
768
+ <p class="text-gray-600">Yes! All our plans come with a free first month. You don't need to provide credit card details to start your free trial. After your first month, you can choose to continue with any of our paid plans or cancel anytime with no obligations.</p>
769
+ </div>
770
+ </div>
771
+
772
+ <!-- FAQ Item 3 -->
773
+ <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
774
+ <button onclick="toggleFAQ(3)" class="flex items-center justify-between w-full p-4 bg-white hover:bg-gray-50 focus:outline-none">
775
+ <h3 class="text-lg font-medium text-gray-900 text-left">How does the job portal work?</h3>
776
+ <i class="ri-arrow-down-s-line text-xl text-gray-500 transform transition-transform duration-200" id="faqIcon3"></i>
777
+ </button>
778
+ <div id="faqContent3" class="hidden px-4 pb-4 pt-2 bg-white">
779
+ <p class="text-gray-600">Our job portal connects businesses with talented professionals. As a job seeker, you can create a profile, browse job listings, and apply with one click. As an employer, you can post job openings, review applications, and manage the hiring process all within our platform. We offer tools for both sides to streamline the entire recruitment process.</p>
780
+ </div>
781
+ </div>
782
+
783
+ <!-- FAQ Item 4 -->
784
+ <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
785
+ <button onclick="toggleFAQ(4)" class="flex items-center justify-between w-full p-4 bg-white hover:bg-gray-50 focus:outline-none">
786
+ <h3 class="text-lg font-medium text-gray-900 text-left">Can I upgrade or downgrade my plan later?</h3>
787
+ <i class="ri-arrow-down-s-line text-xl text-gray-500 transform transition-transform duration-200" id="faqIcon4"></i>
788
+ </button>
789
+ <div id="faqContent4" class="hidden px-4 pb-4 pt-2 bg-white">
790
+ <p class="text-gray-600">Absolutely! You can change your plan at any time from your account settings. Upgrades take effect immediately, while downgrades will apply at your next billing cycle. All your data and settings are preserved when changing plans.</p>
791
+ </div>
792
+ </div>
793
+
794
+ <!-- FAQ Item 5 -->
795
+ <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
796
+ <button onclick="toggleFAQ(5)" class="flex items-center justify-between w-full p-4 bg-white hover:bg-gray-50 focus:outline-none">
797
+ <h3 class="text-lg font-medium text-gray-900 text-left">What kind of support do you offer?</h3>
798
+ <i class="ri-arrow-down-s-line text-xl text-gray-500 transform transition-transform duration-200" id="faqIcon5"></i>
799
+ </button>
800
+ <div id="faqContent5" class="hidden px-4 pb-4 pt-2 bg-white">
801
+ <p class="text-gray-600">We offer comprehensive support to all our users. Our Starter plan includes email support with a 24-hour response time. Professional and Enterprise plans include priority email support (12-hour response) and live chat during business hours. Enterprise customers also get a dedicated account manager and phone support.</p>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </section>
807
+
808
+ <!-- CTA Section -->
809
+ <section class="py-20 bg-primary">
810
+ <div class="container mx-auto px-4 text-center">
811
+ <h2 class="text-3xl font-bold text-white mb-6">Ready to Start Your Business Journey?</h2>
812
+ <p class="text-white/90 max-w-2xl mx-auto mb-8">Join thousands of entrepreneurs and professionals who are building successful businesses and careers on our platform.</p>
813
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
814
+ <button onclick="openBusinessModal()" class="bg-white text-primary px-6 py-3 !rounded-button hover:bg-gray-100 font-medium text-base whitespace-nowrap flex items-center justify-center smooth-transition">
815
+ <i class="ri-rocket-line mr-2"></i>
816
+ Start Your Business
817
+ </button>
818
+ <button onclick="openJobModal()" class="bg-primary border border-white text-white px-6 py-3 !rounded-button hover:bg-primary/90 font-medium text-base whitespace-nowrap flex items-center justify-center smooth-transition">
819
+ <i class="ri-briefcase-line mr-2"></i>
820
+ Find Jobs
821
+ </button>
822
+ </div>
823
+ </div>
824
+ </section>
825
+
826
+ <!-- Footer -->
827
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
828
+ <div class="container mx-auto px-4">
829
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
830
+ <!-- Company Info -->
831
+ <div class="lg:col-span-2">
832
+ <a href="#" class="text-2xl font-bold text-white mb-4 inline-block flex items-center">
833
+ <i class="ri-lightbulb-flash-line text-3xl mr-2"></i>
834
+ BizConnect
835
+ </a>
836
+ <p class="text-gray-400 mb-4">The all-in-one platform for entrepreneurs and professionals to start, manage, and grow their businesses and careers.</p>
837
+ <div class="flex space-x-4">
838
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary smooth-transition">
839
+ <i class="ri-facebook-fill"></i>
840
+ </a>
841
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary smooth-transition">
842
+ <i class="ri-twitter-x-fill"></i>
843
+ </a>
844
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary smooth-transition">
845
+ <i class="ri-linkedin-fill"></i>
846
+ </a>
847
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary smooth-transition">
848
+ <i class="ri-instagram-fill"></i>
849
+ </a>
850
+ </div>
851
+ </div>
852
+ <!-- Quick Links -->
853
+ <div>
854
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
855
+ <ul class="space-y-2">
856
+ <li><a href="#home" class="text-gray-400 hover:text-white smooth-transition">Home</a></li>
857
+ <li><a href="#features" class="text-gray-400 hover:text-white smooth-transition">Features</a></li>
858
+ <li><a href="#business" class="text-gray-400 hover:text-white smooth-transition">Business</a></li>
859
+ <li><a href="#jobs" class="text-gray-400 hover:text-white smooth-transition">Jobs</a></li>
860
+ <li><a href="#pricing" class="text-gray-400 hover:text-white smooth-transition">Pricing</a></li>
861
+ </ul>
862
+ </div>
863
+ <!-- Business -->
864
+ <div>
865
+ <h4 class="text-lg font-semibold mb-4">Business</h4>
866
+ <ul class="space-y-2">
867
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Start Business</a></li>
868
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Resource Center</a></li>
869
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Community</a></li>
870
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Success Stories</a></li>
871
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Business Tools</a></li>
872
+ </ul>
873
+ </div>
874
+ <!-- Jobs -->
875
+ <div>
876
+ <h4 class="text-lg font-semibold mb-4">Jobs</h4>
877
+ <ul class="space-y-2">
878
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Find Jobs</a></li>
879
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Post a Job</a></li>
880
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Career Resources</a></li>
881
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Hiring Guide</a></li>
882
+ <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Job Categories</a></li>
883
+ </ul>
884
+ </div>
885
+ <!-- Newsletter -->
886
+ <div>
887
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
888
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and tips.</p>
889
+ <form class="flex">
890
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary text-gray-900">
891
+ <button type="submit" class="bg-primary text-white px-4 py-2 rounded-r-md hover:bg-primary/90 smooth-transition">
892
+ <i class="ri-send-plane-line"></i>
893
+ </button>
894
+ </form>
895
+ </div>
896
+ </div>
897
+ <div class="border-t border-gray-800 pt-8">
898
+ <div class="flex flex-col md:flex-row justify-between items-center">
899
+ <p class="text-gray-400 mb-4 md:mb-0">&copy; 2025 BizConnect. All rights reserved.</p>
900
+ <div class="flex space-x-6">
901
+ <a href="#" class="text-gray-400 hover:text-white smooth-transition">Privacy Policy</a>
902
+ <a href="#" class="text-gray-400 hover:text-white smooth-transition">Terms of Service</a>
903
+ <a href="#" class="text-gray-400 hover:text-white smooth-transition">Cookie Policy</a>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ </footer>
909
+
910
+ <!-- Login Modal -->
911
+ <div id="loginModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
912
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
913
+ <div class="p-6">
914
+ <div class="flex justify-between items-center mb-6">
915
+ <h3 class="text-2xl font-bold text-gray-900">Log In</h3>
916
+ <button onclick="closeModal('loginModal')" class="text-gray-500 hover:text-gray-700">
917
+ <i class="ri-close-line text-2xl"></i>
918
+ </button>
919
+ </div>
920
+
921
+ <form id="loginForm" class="space-y-4">
922
+ <div>
923
+ <label for="loginEmail" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
924
+ <input type="email" id="loginEmail" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
925
+ </div>
926
+
927
+ <div>
928
+ <label for="loginPassword" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
929
+ <input type="password" id="loginPassword" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
930
+ </div>
931
+
932
+ <div class="flex items-center justify-between">
933
+ <div class="flex items-center">
934
+ <input id="rememberMe" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
935
+ <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
936
+ </div>
937
+ <a href="#" class="text-sm text-primary hover:text-primary/80">Forgot password?</a>
938
+ </div>
939
+
940
+ <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 smooth-transition">
941
+ Log In
942
+ </button>
943
+ </form>
944
+
945
+ <div class="mt-6">
946
+ <p class="text-center text-sm text-gray-600">
947
+ Don't have an account?
948
+ <button onclick="switchToRegister()" class="text-primary font-medium hover:text-primary/80 smooth-transition">Register here</button>
949
+ </p>
950
+ </div>
951
+
952
+ <div class="mt-6">
953
+ <div class="relative">
954
+ <div class="absolute inset-0 flex items-center">
955
+ <div class="w-full border-t border-gray-300"></div>
956
+ </div>
957
+ <div class="relative flex justify-center text-sm">
958
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
959
+ </div>
960
+ </div>
961
+
962
+ <div class="mt-6 grid grid-cols-3 gap-3">
963
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
964
+ <i class="ri-google-fill text-xl"></i>
965
+ </button>
966
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
967
+ <i class="ri-facebook-fill text-xl"></i>
968
+ </button>
969
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
970
+ <i class="ri-linkedin-fill text-xl"></i>
971
+ </button>
972
+ </div>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </div>
977
+
978
+ <!-- Register Modal -->
979
+ <div id="registerModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
980
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
981
+ <div class="p-6">
982
+ <div class="flex justify-between items-center mb-6">
983
+ <h3 class="text-2xl font-bold text-gray-900">Create Account</h3>
984
+ <button onclick="closeModal('registerModal')" class="text-gray-500 hover:text-gray-700">
985
+ <i class="ri-close-line text-2xl"></i>
986
+ </button>
987
+ </div>
988
+
989
+ <form id="registerForm" class="space-y-4">
990
+ <div>
991
+ <label for="registerName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
992
+ <input type="text" id="registerName" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
993
+ </div>
994
+
995
+ <div>
996
+ <label for="registerEmail" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
997
+ <input type="email" id="registerEmail" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
998
+ </div>
999
+
1000
+ <div>
1001
+ <label for="registerPassword" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
1002
+ <input type="password" id="registerPassword" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
1003
+ <p class="mt-1 text-xs text-gray-500">Must be at least 8 characters</p>
1004
+ </div>
1005
+
1006
+ <div>
1007
+ <label for="registerConfirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
1008
+ <input type="password" id="registerConfirmPassword" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
1009
+ </div>
1010
+
1011
+ <div class="flex items-center">
1012
+ <input id="acceptTerms" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" required>
1013
+ <label for="acceptTerms" class="ml-2 block text-sm text-gray-700">
1014
+ I agree to the <a href="#" class="text-primary hover:text-primary/80">Terms of Service</a> and <a href="#" class="text-primary hover:text-primary/80">Privacy Policy</a>
1015
+ </label>
1016
+ </div>
1017
+
1018
+ <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 smooth-transition">
1019
+ Create Account
1020
+ </button>
1021
+ </form>
1022
+
1023
+ <div class="mt-6">
1024
+ <p class="text-center text-sm text-gray-600">
1025
+ Already have an account?
1026
+ <button onclick="switchToLogin()" class="text-primary font-medium hover:text-primary/80 smooth-transition">Log in here</button>
1027
+ </p>
1028
+ </div>
1029
+
1030
+ <div class="mt-6">
1031
+ <div class="relative">
1032
+ <div class="absolute inset-0 flex items-center">
1033
+ <div class="w-full border-t border-gray-300"></div>
1034
+ </div>
1035
+ <div class="relative flex justify-center text-sm">
1036
+ <span class="px-2 bg-white text-gray-500">Or sign up with</span>
1037
+ </div>
1038
+ </div>
1039
+
1040
+ <div class="mt-6 grid grid-cols-3 gap-3">
1041
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
1042
+ <i class="ri-google-fill text-xl"></i>
1043
+ </button>
1044
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
1045
+ <i class="ri-facebook-fill text-xl"></i>
1046
+ </button>
1047
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
1048
+ <i class="ri-linkedin-fill text-xl"></i>
1049
+ </button>
1050
+ </div>
1051
+ </div>
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+
1056
+ <!-- Business Modal -->
1057
+ <div id="businessModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
1058
+ <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4">
1059
+ <div class="p-6">
1060
+ <div class="flex justify-between items-center mb-6">
1061
+ <h3 class="text-2xl font-bold text-gray-900">Start Your Business</h3>
1062
+ <button onclick="closeModal('businessModal')" class="text-gray-500 hover:text-gray-700">
1063
+ <i class="ri-close-line text-2xl"></i>
1064
+ </button>
1065
+ </div>
1066
+
1067
+ <form id="businessForm" class="space-y-4">
1068
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1069
+ <div>
1070
+ <label for="businessName" class="block text-sm font-medium text-gray-700 mb-1">Business Name</label>
1071
+ <input type="text" id="businessName" class="form-input w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
1072
+ </div>
1073
+
1074
+ <div>
1075
+ <label for="businessType" class="block text-sm font-medium text-gray-700 mb-1">Business Type</label>
1076
+ <select id="businessType" class="custom-select w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-gray-700" required>
1077
+ <option value="">Select business type</option>
1078
+ <option value="sole">Sole Proprietorship
1079
+ <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=ajay7556/dfdsfsd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1080
+ </html>