Hugging Face's logo

Spaces:
sreenathsree1578
/
undefined
Running

App Files Community
undefined
File size: 16,431 Bytes 
a06d48d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PropWizard - Modern Property Management</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .chat-bubble {
            border-radius: 1.5rem 1.5rem 1.5rem 0;
        }
        .chat-bubble-right {
            border-radius: 1.5rem 1.5rem 0 1.5rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Cookie Consent Banner -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 p-4 border-t border-gray-200">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <p class="text-gray-700 text-sm">By clicking "Accept", you agree to the storage of cookies on your device to improve website navigation, analyse website usage and assist with our marketing efforts.</p>
                <div class="flex gap-2">
                    <button class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100">Preferences</button>
                    <button class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100">Deny</button>
                    <button class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Accept</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center">
                    <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/654a4eca1f8c2ba5f4a71159_Logo.svg" alt="PropWizard Logo" class="h-8">
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <div class="relative group">
                        <button class="text-gray-700 hover:text-indigo-600 flex items-center gap-1">
                            Features <i data-feather="chevron-down" class="w-4 h-4"></i>
                        </button>
                        <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg mt-2 py-2 w-48 z-50">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Service Hub</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Property Management</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Supplier Portal</a>
                        </div>
                    </div>
                    <a href="#" class="text-gray-700 hover:text-indigo-600">Pricing</a>
                    <a href="#" class="text-gray-700 hover:text-indigo-600">Integrations</a>
                    <a href="#" class="text-gray-700 hover:text-indigo-600">Company</a>
                </div>
                <div class="flex items-center gap-4">
                    <a href="#" class="text-gray-700 hover:text-indigo-600 hidden md:block">Log In</a>
                    <a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Request Demo</a>
                    <button class="md:hidden">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="gradient-bg text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                    <h1 class="text-4xl md:text-5xl font-bold mb-6">Spend time on your tenants, not administration – with AI as an assistant</h1>
                    <p class="text-xl mb-8 text-indigo-100">The property platform for owners, admins, and tenants</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#" class="px-6 py-3 bg-white text-indigo-600 font-medium rounded-lg hover:bg-gray-100 text-center">Get in touch</a>
                        <a href="#" class="px-6 py-3 border border-white text-white font-medium rounded-lg hover:bg-white hover:text-indigo-600 text-center">Watch demo</a>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute -top-8 -left-8 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div>
                    <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div>
                    <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/65f94da667d0dcbb9ccdb075_Browser%20-%20EN.png" alt="PropWizard Dashboard" class="relative z-10 rounded-lg shadow-2xl">
                </div>
            </div>
        </div>
    </section>

    <!-- AI Chat Examples -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Chat Example 1 -->
                <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
                    <div class="flex mb-6">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i data-feather="user" class="text-indigo-600"></i>
                        </div>
                        <div class="ml-4">
                            <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs">
                                Can't find my lease agreement. Can you send me a copy?
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mb-6">
                        <div class="mr-4">
                            <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs">
                                I'll send you a copy right away.
                            </div>
                        </div>
                        <div class="bg-indigo-600 p-3 rounded-full text-white">
                            <i data-feather="check"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2">
                        Inquiry complete
                    </div>
                </div>
                
                <!-- Chat Example 2 -->
                <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
                    <div class="flex mb-6">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i data-feather="user" class="text-indigo-600"></i>
                        </div>
                        <div class="ml-4">
                            <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs">
                                I locked myself out of my apartment
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mb-6">
                        <div class="mr-4">
                            <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs">
                                We'll arrange for a locksmith to assist you
                            </div>
                        </div>
                        <div class="bg-indigo-600 p-3 rounded-full text-white">
                            <i data-feather="check"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2">
                        Janitor assigned
                    </div>
                </div>
                
                <!-- Chat Example 3 -->
                <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
                    <div class="flex mb-6">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i data-feather="user" class="text-indigo-600"></i>
                        </div>
                        <div class="ml-4">
                            <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs">
                                My washer is overflowing! Can you send a technician?
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mb-6">
                        <div class="mr-4">
                            <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs">
                                The technician is on their way!
                            </div>
                        </div>
                        <div class="bg-indigo-600 p-3 rounded-full text-white">
                            <i data-feather="check"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2">
                        Supplier assigned
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">All-in-one Property solution</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">The property platform for owners, admins, and tenants</p>
            </div>
            
            <!-- Feature 1 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
                <div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">ServiceHub</h3>
                    <p class="text-lg text-gray-600 mb-6">Optimize your rental communication with two-way communication with tenants, suppliers and owners across inquiries, assignments, properties and documents - now intelligently supported by AI.</p>
                    <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
                        Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                    </a>
                </div>
                <div class="relative">
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
                    <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
                    <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/67d29c08b226c78e63db7fd0_features-image-1-EN-desktop.png" alt="ServiceHub" class="relative z-10 rounded-lg shadow-lg">
                </div>
            </div>
            
            <!-- Feature 2 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
                <div class="md:order-2">
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Property management</h3>
                    <p class="text-lg text-gray-600 mb-6">Optimize real estate operations in your portfolio. Keep track of maintenance tasks and service agreements with an integrated solution that ensures efficient asset management.</p>
                    <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
                        Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                    </a>
                </div>
                <div class="relative md:order-1">
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
                    <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
                    <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/67d15e3c4a82933aa69e74d0_features-image-3-EN.png" alt="Property Management" class="relative z-10 rounded-lg shadow-lg">
                </div>
            </div>
            
            <!-- Feature 3 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Supplier management</h3>
                    <p class="text-lg text-gray-600 mb-6">Easy and efficient supplier management. Send requisitions directly to suppliers, follow up on cases, and communicate easily for a smooth and efficient workflow.</p>
                    <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
                        Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                    </a>
                </div>
                <div class="relative">
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
                    <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
                    <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/67d15e4cea8765bb91e50d51_features-image-2-EN.png" alt="Supplier Management" class="relative z-10 rounded-lg shadow-lg">
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Modern real estate teams run on PropWizard</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Testimonial 1 -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
                    <p class="text-lg text-gray-600 mb-6">"With PropWizard, we can now offer our employees and tenants even more streamlined communication and sustainable property management."</p>
                    <div class="flex items-center">
                        <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/66cc80f457d6428670aa9f14_Thomas%20E..jpeg" alt="Thomas Elefsen" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold text-gray-900">Thomas Elefsen</h4>
                            <p class="text-sm text-gray-500">Adm. Direktør, Norhjem Administration</p>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
                    <p class="text-lg text-gray-600 mb-6">"The platform's comprehensive features promote sustainable and efficient property management, enabling us to optimise and integrate all aspects of our property administration."</p>
                    <div class="flex items-center">
                        <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/
</body>
</html>