Hugging Face's logo

Spaces:
sreenathsree1578
/
undefined
Running

App Files Community
sreenathsree1578 commited on
Commit
a06d48d
·
verified ·
1 Parent(s): f9fa3eb

{% extends "base.html" %}

Browse files

{% block title %}Online Exam Platform{% endblock %}

{% block content %}
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&family=Saira:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdn.tailwindcss.com"></script>

<style>
:root {
--primary-color: #000000;
--primary-dark: #111111;
--primary-light: #333333;
--secondary-color: #FFFFFF;
--accent-color: #7C3AED;
--text-primary: #000000;
--text-secondary: #666666;
--text-light: #999999;
--bg-light: #F5F5F5;
--bg-white: #FFFFFF;
--bg-dark: #121212;
--border-color: #E5E7EB;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
}

* {
font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}

body {
color: var(--text-primary);
background-color: var(--bg-white);
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Hero Section Styles - Fixed horizontal scrolling issue */
.hero-gradient {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
min-height: 110vh;
background-color: #000;
color: #fff;
display: flex;
align-items: center;
overflow: hidden;

margin-top: -24px;
}

.hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
object-fit: cover;
z-index: 0;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
}


/* Hero Section Font - Saira */
.hero-saira {
font-family: 'Saira', sans-serif;
}

/* Button Styles - Removed border-radius */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
text-decoration: none;
cursor: pointer;
border: none;
box-shadow: var(--shadow-md);
}

.btn-primary {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
}

.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}

.btn-outline:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
}

/* Card Styles */
.card {
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}

.card-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
}

.card-body {
padding: 1.5rem;
}

.card-footer {
padding: 1.5rem;
border-top: 1px solid var(--border-color);
background-color: var(--bg-light);
}

/* Feature Card Styles */
.feature-card {
text-align: center;
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.feature-icon {
width: 4rem;
height: 4rem;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
font-size: 1.5rem;
}

/* Carousel Section - Smaller and Left Aligned */
.carousel-section {
background-color: var(--bg-white);
padding: 4rem 0;


}

.carousel-container {
position: relative;
width: 100%;
max-width: 500px;
height: 350px;
overflow: hidden;
box-shadow: var(--shadow-xl);
border-radius: 1px;


}

.carousel {
display: flex;
width: 100%;
height: 100%;


transition: transform 0.5s ease-in-out;
}

.carousel-slide {
position: relative;
width: 100%;
height: 100%;
flex-shrink: 0;
}

.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.carousel-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 1.5rem;
color: white;
}

.carousel-text h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.25rem;
}

.carousel-text p {
font-size: 0.8rem;
opacity: 0.9;
}

.carousel-indicators {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 10;
}

.carousel-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}

.carousel-dot.active {
background-color: white;
width: 1.2rem;
border-radius: 0.2rem;
}

/* Carousel Content Layout */
.carousel-content {
display: flex;
align-items: center;
gap: 3rem;

}

.carousel-text-content {
flex: 1;
}

.carousel-text-content h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--primary-color);
}

.carousel-text-content p {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}

.carousel-text-content ul {
list-style: none;
padding: 0;
}

.carousel-text-content li {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
font-size: 1rem;
color: var(--text-secondary);
}

.carousel-text-content li i {
color: var(--accent-color);
margin-right: 0.75rem;
margin-top: 0.25rem;
}

/* Stats Section */
.stat-card {
text-align: center;
padding: 1.5rem;
}

.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
font-family: 'Montserrat', sans-serif;
}

.stat-label {
font-size: 1rem;
color: var(--text-secondary);
font-weight: 500;
}

/* Testimonial Card */
.testimonial-card {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.testimonial-avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
margin-bottom: 1rem;
object-fit: cover;
}

.testimonial-text {
font-style: italic;
color: var(--text-secondary);
margin-bottom: 1.5rem;
flex-grow: 1;
}

.testimonial-name {
font-weight: 600;
margin-bottom: 0.25rem;
}

.testimonial-title {
color: var(--text-secondary);
font-size: 0.875rem;
margin-bottom: 1rem;
}

.testimonial-rating {
color: var(--accent-color);
}

/* Access Card */
.access-card {
height: 100%;
display: flex;
flex-direction: column;
}

.access-icon {
width: 5rem;
height: 5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
}

.student-icon {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.admin-icon {
background: linear-gradient(135deg, #EF4444, #DC2626);
}

/* FAQ Accordion */
.faq-i

Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +271 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐠
4
- colorFrom: blue
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: undefined
3
+ colorFrom: yellow
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,271 @@
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>PropWizard - Modern Property Management</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
18
+ }
19
+ .chat-bubble {
20
+ border-radius: 1.5rem 1.5rem 1.5rem 0;
21
+ }
22
+ .chat-bubble-right {
23
+ border-radius: 1.5rem 1.5rem 0 1.5rem;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-gray-50">
28
+ <!-- Cookie Consent Banner -->
29
+ <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 p-4 border-t border-gray-200">
30
+ <div class="max-w-6xl mx-auto">
31
+ <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
32
+ <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>
33
+ <div class="flex gap-2">
34
+ <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>
35
+ <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>
36
+ <button class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Accept</button>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <!-- Navigation -->
43
+ <nav class="bg-white shadow-sm sticky top-0 z-40">
44
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex justify-between h-16 items-center">
46
+ <div class="flex items-center">
47
+ <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/654a4eca1f8c2ba5f4a71159_Logo.svg" alt="PropWizard Logo" class="h-8">
48
+ </div>
49
+ <div class="hidden md:flex items-center space-x-8">
50
+ <div class="relative group">
51
+ <button class="text-gray-700 hover:text-indigo-600 flex items-center gap-1">
52
+ Features <i data-feather="chevron-down" class="w-4 h-4"></i>
53
+ </button>
54
+ <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg mt-2 py-2 w-48 z-50">
55
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Service Hub</a>
56
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Property Management</a>
57
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Supplier Portal</a>
58
+ </div>
59
+ </div>
60
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Pricing</a>
61
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Integrations</a>
62
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Company</a>
63
+ </div>
64
+ <div class="flex items-center gap-4">
65
+ <a href="#" class="text-gray-700 hover:text-indigo-600 hidden md:block">Log In</a>
66
+ <a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Request Demo</a>
67
+ <button class="md:hidden">
68
+ <i data-feather="menu"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Hero Section -->
76
+ <section class="gradient-bg text-white">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
78
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
79
+ <div>
80
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Spend time on your tenants, not administration – with AI as an assistant</h1>
81
+ <p class="text-xl mb-8 text-indigo-100">The property platform for owners, admins, and tenants</p>
82
+ <div class="flex flex-col sm:flex-row gap-4">
83
+ <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>
84
+ <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>
85
+ </div>
86
+ </div>
87
+ <div class="relative">
88
+ <div class="absolute -top-8 -left-8 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div>
89
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div>
90
+ <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">
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- AI Chat Examples -->
97
+ <section class="py-16 bg-white">
98
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
100
+ <!-- Chat Example 1 -->
101
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
102
+ <div class="flex mb-6">
103
+ <div class="bg-indigo-100 p-3 rounded-full">
104
+ <i data-feather="user" class="text-indigo-600"></i>
105
+ </div>
106
+ <div class="ml-4">
107
+ <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs">
108
+ Can't find my lease agreement. Can you send me a copy?
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <div class="flex justify-end mb-6">
113
+ <div class="mr-4">
114
+ <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs">
115
+ I'll send you a copy right away.
116
+ </div>
117
+ </div>
118
+ <div class="bg-indigo-600 p-3 rounded-full text-white">
119
+ <i data-feather="check"></i>
120
+ </div>
121
+ </div>
122
+ <div class="flex items-center text-sm text-gray-500">
123
+ <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2">
124
+ Inquiry complete
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Chat Example 2 -->
129
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
130
+ <div class="flex mb-6">
131
+ <div class="bg-indigo-100 p-3 rounded-full">
132
+ <i data-feather="user" class="text-indigo-600"></i>
133
+ </div>
134
+ <div class="ml-4">
135
+ <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs">
136
+ I locked myself out of my apartment
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="flex justify-end mb-6">
141
+ <div class="mr-4">
142
+ <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs">
143
+ We'll arrange for a locksmith to assist you
144
+ </div>
145
+ </div>
146
+ <div class="bg-indigo-600 p-3 rounded-full text-white">
147
+ <i data-feather="check"></i>
148
+ </div>
149
+ </div>
150
+ <div class="flex items-center text-sm text-gray-500">
151
+ <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2">
152
+ Janitor assigned
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Chat Example 3 -->
157
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
158
+ <div class="flex mb-6">
159
+ <div class="bg-indigo-100 p-3 rounded-full">
160
+ <i data-feather="user" class="text-indigo-600"></i>
161
+ </div>
162
+ <div class="ml-4">
163
+ <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs">
164
+ My washer is overflowing! Can you send a technician?
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <div class="flex justify-end mb-6">
169
+ <div class="mr-4">
170
+ <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs">
171
+ The technician is on their way!
172
+ </div>
173
+ </div>
174
+ <div class="bg-indigo-600 p-3 rounded-full text-white">
175
+ <i data-feather="check"></i>
176
+ </div>
177
+ </div>
178
+ <div class="flex items-center text-sm text-gray-500">
179
+ <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2">
180
+ Supplier assigned
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Features Section -->
188
+ <section class="py-16 bg-gray-50">
189
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
190
+ <div class="text-center mb-16">
191
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">All-in-one Property solution</h2>
192
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">The property platform for owners, admins, and tenants</p>
193
+ </div>
194
+
195
+ <!-- Feature 1 -->
196
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
197
+ <div>
198
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">ServiceHub</h3>
199
+ <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>
200
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
201
+ Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
202
+ </a>
203
+ </div>
204
+ <div class="relative">
205
+ <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
206
+ <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
207
+ <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">
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Feature 2 -->
212
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
213
+ <div class="md:order-2">
214
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Property management</h3>
215
+ <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>
216
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
217
+ Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
218
+ </a>
219
+ </div>
220
+ <div class="relative md:order-1">
221
+ <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
222
+ <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
223
+ <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">
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Feature 3 -->
228
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
229
+ <div>
230
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Supplier management</h3>
231
+ <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>
232
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
233
+ Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
234
+ </a>
235
+ </div>
236
+ <div class="relative">
237
+ <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
238
+ <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div>
239
+ <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">
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Testimonials -->
246
+ <section class="py-16 bg-white">
247
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
248
+ <div class="text-center mb-16">
249
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Modern real estate teams run on PropWizard</h2>
250
+ </div>
251
+
252
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
253
+ <!-- Testimonial 1 -->
254
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
255
+ <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>
256
+ <div class="flex items-center">
257
+ <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">
258
+ <div>
259
+ <h4 class="font-bold text-gray-900">Thomas Elefsen</h4>
260
+ <p class="text-sm text-gray-500">Adm. Direktør, Norhjem Administration</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Testimonial 2 -->
266
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
267
+ <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>
268
+ <div class="flex items-center">
269
+ <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/
270
+ </body>
271
+ </html>