x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<div class="container my-5"> <!-- Page Header --> <div class="text-center mb-5"> <h1 class="display-1 mb-3">Application Journey</h1> <p class="lead text-muted">Complete your application in 4 simple steps</p> </div> <!-- Step Navigation --> <div class="mb-5"> <ul class="nav nav-pills nav-fill nav-lg"> <li class="nav-item"> <a class="nav-link active" href="#"> <strong>Step 1</strong><br> <span class="text-sm">Personal Info</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <strong>Step 2</strong><br> <span class="text-sm">Education</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <strong>Step 3</strong><br> <span class="text-sm">Experience</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <strong>Step 4</strong><br> <span class="text-sm">Review</span> </a> </li> </ul> </div> <!-- Main Content Card --> <div class="card mb-4"> <div class="card-body"> <h2 class="h3 card-title mb-4">Step 1: Personal Information</h2> <div class="callout mb-4"> <p class="mb-0"> <strong>Note:</strong> All fields marked with an asterisk (*) are required. Your information is kept secure and confidential. </p> </div> <div class="space-y-4"> <!-- Form Section: Basic Info --> <div> <h3 class="h5 mb-3">Basic Information</h3> <div class="space-y-3"> <div> <label class="fw-semibold mb-1">Full Name *</label> <p class="text-muted text-sm">Enter your legal name as it appears on official documents</p> </div> <div> <label class="fw-semibold mb-1">Email Address *</label> <p class="text-muted text-sm">We'll use this for all communication regarding your application</p> </div> <div> <label class="fw-semibold mb-1">Phone Number *</label> <p class="text-muted text-sm">Include country code for international numbers</p> </div> </div> </div> <!-- Form Section: Address --> <div class="border-t pt-4"> <h3 class="h5 mb-3">Address Details</h3> <div class="space-y-3"> <div> <label class="fw-semibold mb-1">Street Address *</label> <p class="text-muted text-sm">House number and street name</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="fw-semibold mb-1">City *</label> </div> <div> <label class="fw-semibold mb-1">Postal Code *</label> </div> </div> <div> <label class="fw-semibold mb-1">Country *</label> <p class="text-muted text-sm">Select your country of residence</p> </div> </div> </div> </div> </div> </div> <!-- Progress Indicator --> <div class="card mb-4"> <div class="card-body"> <div class="flex justify-between items-center"> <div> <p class="text-sm text-muted mb-1">Application Progress</p> <p class="h4 mb-0">25% Complete</p> </div> <div class="text-end"> <span class="badge bg-primary">Step 1 of 4</span> </div> </div> </div> </div> <!-- Action Buttons --> <div class="flex justify-between items-center"> <button class="btn btn-outline-secondary" type="button" disabled> Previous </button> <div class="flex gap-2"> <button class="btn btn-outline-secondary" type="button"> Save Draft </button> <button class="btn btn-primary" type="button"> Next Step </button> </div> </div> <!-- Additional Information Cards --> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-5"> <div class="card"> <div class="card-body"> <div class="text-center"> <h3 class="h5 card-title text-primary">Need Help?</h3> <p class="text-sm text-muted mb-3">Our support team is here to assist you</p> <button class="btn btn-outline-primary btn-sm">Contact Support</button> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="text-center"> <h3 class="h5 card-title text-success">Save Progress</h3> <p class="text-sm text-muted mb-3">Your application is automatically saved</p> <button class="btn btn-outline-success btn-sm">View Drafts</button> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="text-center"> <h3 class="h5 card-title text-info">Learn More</h3> <p class="text-sm text-muted mb-3">Read our application guidelines</p> <button class="btn btn-outline-info btn-sm">View Guide</button> </div> </div> </div> </div> <!-- Footer Information --> <div class="mt-5 pt-4 border-t"> <div class="text-center"> <p class="text-muted text-sm mb-2"> By continuing, you agree to our Terms of Service and Privacy Policy </p> <div class="flex justify-center gap-3"> <button class="btn btn-link btn-sm">Terms of Service</button> <button class="btn btn-link btn-sm">Privacy Policy</button> <button class="btn btn-link btn-sm">FAQ</button> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<div class="container my-5"> <!-- Page Header --> <div class="text-center mb-5"> <h1 class="display-1 mb-3">Application Journey</h1> <p class="lead text-muted">Complete your application in 4 simple steps</p> </div> <!-- Step Navigation --> <div class="mb-5"> <ul class="nav nav-pills nav-fill nav-lg"> <li class="nav-item"> <a class="nav-link active" href="#"> <strong>Step 1</strong><br> <span class="text-sm">Personal Info</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <strong>Step 2</strong><br> <span class="text-sm">Education</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <strong>Step 3</strong><br> <span class="text-sm">Experience</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <strong>Step 4</strong><br> <span class="text-sm">Review</span> </a> </li> </ul> </div> <!-- Main Content Card --> <div class="card mb-4"> <div class="card-body"> <h2 class="h3 card-title mb-4">Step 1: Personal Information</h2> <div class="callout mb-4"> <p class="mb-0"> <strong>Note:</strong> All fields marked with an asterisk (*) are required. Your information is kept secure and confidential. </p> </div> <div class="space-y-4"> <!-- Form Section: Basic Info --> <div> <h3 class="h5 mb-3">Basic Information</h3> <div class="space-y-3"> <div> <label class="fw-semibold mb-1">Full Name *</label> <p class="text-muted text-sm">Enter your legal name as it appears on official documents</p> </div> <div> <label class="fw-semibold mb-1">Email Address *</label> <p class="text-muted text-sm">We'll use this for all communication regarding your application</p> </div> <div> <label class="fw-semibold mb-1">Phone Number *</label> <p class="text-muted text-sm">Include country code for international numbers</p> </div> </div> </div> <!-- Form Section: Address --> <div class="border-t pt-4"> <h3 class="h5 mb-3">Address Details</h3> <div class="space-y-3"> <div> <label class="fw-semibold mb-1">Street Address *</label> <p class="text-muted text-sm">House number and street name</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="fw-semibold mb-1">City *</label> </div> <div> <label class="fw-semibold mb-1">Postal Code *</label> </div> </div> <div> <label class="fw-semibold mb-1">Country *</label> <p class="text-muted text-sm">Select your country of residence</p> </div> </div> </div> </div> </div> </div> <!-- Progress Indicator --> <div class="card mb-4"> <div class="card-body"> <div class="flex justify-between items-center"> <div> <p class="text-sm text-muted mb-1">Application Progress</p> <p class="h4 mb-0">25% Complete</p> </div> <div class="text-end"> <span class="badge bg-primary">Step 1 of 4</span> </div> </div> </div> </div> <!-- Action Buttons --> <div class="flex justify-between items-center"> <button class="btn btn-outline-secondary" type="button" disabled> Previous </button> <div class="flex gap-2"> <button class="btn btn-outline-secondary" type="button"> Save Draft </button> <button class="btn btn-primary" type="button"> Next Step </button> </div> </div> <!-- Additional Information Cards --> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-5"> <div class="card"> <div class="card-body"> <div class="text-center"> <h3 class="h5 card-title text-primary">Need Help?</h3> <p class="text-sm text-muted mb-3">Our support team is here to assist you</p> <button class="btn btn-outline-primary btn-sm">Contact Support</button> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="text-center"> <h3 class="h5 card-title text-success">Save Progress</h3> <p class="text-sm text-muted mb-3">Your application is automatically saved</p> <button class="btn btn-outline-success btn-sm">View Drafts</button> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="text-center"> <h3 class="h5 card-title text-info">Learn More</h3> <p class="text-sm text-muted mb-3">Read our application guidelines</p> <button class="btn btn-outline-info btn-sm">View Guide</button> </div> </div> </div> </div> <!-- Footer Information --> <div class="mt-5 pt-4 border-t"> <div class="text-center"> <p class="text-muted text-sm mb-2"> By continuing, you agree to our Terms of Service and Privacy Policy </p> <div class="flex justify-center gap-3"> <button class="btn btn-link btn-sm">Terms of Service</button> <button class="btn btn-link btn-sm">Privacy Policy</button> <button class="btn btn-link btn-sm">FAQ</button> </div> </div> </div></div>No notes provided.
No params configured.