File: /var/www/soreal.space/wp-content/themes/soreal/assets/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
container: {
padding: '1rem',
screens: {
'2xl': '1216px',
},
},
colors: {
primary: '#5D5FEF',
primaryHover: '#595997',
secondary: '#3A86FF',
'black-900': '#1B1D21',
'balck-800': '#0F1419',
'black-700': '#2E2F41',
'gray-400': '#555555',
'black-600': '#536471',
'gray-700': '#636872',
'gray-800': '#77808B',
white2: '#EFF3F4'
},
lineHeight: {
'70': '70px',
}
}
}
}
</script>
<style type="text/tailwindcss">
* {
@apply m-0 p-0;
}
body {
font-family: "DM Sans", sans-serif;
font-optical-sizing: auto;
}
section {
@apply lg:py-[120px] md:py-[70px] py-20;
}
a {
@apply inline-block;
}
h1 {
@apply md:text-3xl lg:text-[52px] lg:leading-70 bg-gradient-to-r from-primary to-primaryHover font-semibold bg-clip-text uppercase;
-webkit-text-fill-color: transparent;
}
h2 {
@apply md:text-3xl lg:text-5xl lg:leading-70 bg-gradient-to-r from-primary to-primaryHover font-semibold bg-clip-text uppercase;
-webkit-text-fill-color: transparent;
}
h3 {
@apply md:text-2xl lg:text-4xl font-semibold flex items-end mb-4;
}
h4 {
@apply text-lg lg:text-2xl;
}
h6 {
@apply text-black-700 text-base lg:text-lg;
}
p {
@apply text-base;
}
.pricing ul li {
@apply relative pl-[30px] before:content-[''] before:absolute before:left-0 before:top-1 before:bg-[url(images/tick-mark.svg)] before:w-[20px] before:h-[20px] before:bg-cover before:bg-center before:bg-no-repeat;
}
</style>
</head>
<body>
<section class="banner" style="background: url(images/Background.png) center bottom / cover no-repeat;">
<div class="container mx-auto">
<div class="md:flex -mx-4">
<div class="md:w-1/2 w-full px-4">
<h1 class="mb-2">Revolutionize Your Real Estate Sales with Soreal</h1>
<p class="mb-5">Increase sales, centralize operations, and engage customers like never before.
</p>
<a href="#"
class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transperent hover:text-primary border-primary ">Request
a Demo</a>
</div>
<div class="md:w-1/2 w-full px-4">
<img src="images/banner-image.png" alt="solution">
</div>
</div>
</div>
</section>
<section class="about">
<div class="container mx-auto">
<div class="md:flex -mx-4">
<div class="md:w-1/2 w-full px-4">
<img src="images/about-us.png" alt="solution">
<!-- <div class="about-details">
<div>
<h2 class="mb-2">28%</h2>
<p>Increase in bookings & sales.</p>
</div>
<div>
<h2 class="mb-2">38%</h2>
<p>Faster project completion</p>
</div>
<div>
<h2 class="mb-2">28%</h2>
<p>Reduction in planning cost</p>
</div>
</div> -->
</div>
<div class="md:w-1/2 w-full px-4">
<h2 class="mb-2">Innovative Real Estate Sales Solutions</h2>
<p class="mb-5">Transforming the way real estate is sold, from brochures to virtual reality, Soreal
brings your
projects to life. Our mission is to help developers and agents sell faster and more efficiently.
</p>
<a href="#"
class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transperent hover:text-primary border-primary ">Subscribe</a>
</div>
</div>
</div>
</section>
<section class="feature">
<div class="container mx-auto">
<div class="flex flex-wrap items-end -mx-4">
<div class="md:w-1/2 w-full px-4">
<div class="lg:w-8/12 w-full">
<h2>
Features and
Impact
</h2>
<p>Transforming the way real estate is sold, from brochures to
virtual
reality, Soreal
brings your projects to life. Our mission is to help developers and agents sell faster
and more efficiently.</p>
</div>
</div>
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
</div>
<div class="flex flex-wrap items-end">
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
</div>
<div class="flex flex-wrap items-end">
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
</div>
<div class="flex flex-wrap items-end">
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
<div class="md:w-1/2 w-full px-4">
<div class="lg:p-8 md:p-4 p-0 pb-4">
<img src="images/feature-1.svg" alt="features" class="mb-3">
<h4 class="mb-2">Furnished Unfurnished views</h4>
<p>View units as they will be received, with the option to see furnished versions
with a simple click. This feature allows potential buyers to emotionally connect
with the space and envision themselves living there.</p>
</div>
</div>
</div>
</div>
</section>
<!-- <section class="works">
<div class="text-center">
<h2>How it’s work</h2>
<p>Effortlessly connect, showcase, and tour properties with Soreal's seamless platform.</p>
</div>
<ul>
<li>
<div>
<h4>Login</h4>
<p>Securely log into your Soreal account to get started.</p>
</div>
<div>
<img src="images/slide-1.png" alt="solution" >
</div>
</li>
<li>
<div>
<h4>Login</h4>
<p>Securely log into your Soreal account to get started.</p>
</div>
<div>
<img src="images/slide-1.png" alt="solution" >
</div>
</li>
<li>
<div>
<h4>Login</h4>
<p>Securely log into your Soreal account to get started.</p>
</div>
<div>
<img src="images/slide-1.png" alt="solution" >
</div>
</li>
</ul>
</section> -->
<section class="request-details" style="background: url(images/booking.png) center center / cover no-repeat;">
<div class="container mx-auto">
<div class="flex justify-between items-center">
<h3 class="text-3xl text-white font-medium">Request a Booking</h3>
<a class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transparent hover:text-primary border border-primary transition "
href="">Explore More</a>
</div>
</div>
</section>
<!-- <section class="solutions">
<div class="container mx-auto">
<div class="text-center">
<h1>Real Estate Solutions</h1>
<h6>Tailored strategies for developers, agents, and investors to streamline operations,
boost sales, and maximize returns.</h6>
</div>
<div class="solutions-slider">
<div class="solutions-slide">
<img src="images/slide-1.png" alt="solution" >
<div class="solution-details">
<h4>For Developers</h4>
<p>Effortlessly streamline project launches, manage multiple developments, and centralize your
operations from a single, intuitive platform.</p>
<a href="#" class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transperent hover:text-primary border-primary ">Subscribe</a>
</div>
</div>
</div>
</div>
</section> -->
<section class="pricing bg-[#EEF2FF]">
<div class="container mx-auto">
<div class="text-center mb-10 md:mb-14">
<h2>Choose the plan that’s right for you</h2>
<h6>
Start with the Free plan to try out our platform for an unlimited period of time.
</h6>
</div>
<div class="md:flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-3 lg:mb-0">
<div
class="px-10 pb-24 h-full pt-8 relative hover:shadow-lg hover:shadow-[0_35px_35px_rgba(0,0,0,0.25)] transition rounded-[40px] border-t-2 border-[#0049C6]">
<h3>$9 <span class="text-base font-normal">/month</span></h3>
<h4>Starter Pack</h4>
<p class="text-gray-700 mb-10">All the basics for businesses that are just getting started.</p>
<ul class="text-gray-700 text-md list-none">
<li class="mb-5 text-lg">Single project use</li>
<li class="mb-5 text-lg">Basic Features</li>
<li class="mb-5 text-lg">All components included</li>
</ul>
<a href="#"
class="border-2 transition block text-center px-6 py-3 rounded-md hover:bg-primary hover:text-white text-primary font-medium bg-primary/30 border-primary/50 absolute bottom-10 w-[calc(100%-80px)] left-10">Explore
More</a>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-3 lg:mb-0">
<div
class="px-10 pb-24 h-full pt-8 relative hover:shadow-lg hover:shadow-[0_35px_35px_rgba(0,0,0,0.25)] transition rounded-[40px] border-t-2 border-[#EE4540]">
<h3>$9 <span class="text-base font-normal">/month</span></h3>
<h4>Starter Pack</h4>
<p class="text-gray-700 mb-10">All the basics for businesses that are just getting started.</p>
<ul class="text-gray-700 text-md list-none">
<li class="mb-5 text-lg">Single project use</li>
<li class="mb-5 text-lg">Basic Features</li>
<li class="mb-5 text-lg">All components included</li>
<li class="mb-5 text-lg">Advanced insight</li>
</ul>
<a href="#"
class="border-2 transition block text-center px-6 py-3 rounded-md hover:bg-primary hover:text-white text-primary font-medium bg-primary/30 border-primary/50 absolute bottom-10 w-[calc(100%-80px)] left-10">Explo
re
More</a>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-5 lg:mb-0">
<div
class="px-10 pb-24 h-full pt-8 relative hover:shadow-lg hover:shadow-[0_35px_35px_rgba(0,0,0,0.25)] transition rounded-[40px] border-t-2 border-[#7FBA7A]">
<h3>$9 <span class="text-base font-normal">/month</span></h3>
<h4>Starter Pack</h4>
<p class="text-gray-700 mb-10">All the basics for businesses that are just getting started.</p>
<ul class="text-gray-700 text-md list-none">
<li class="mb-5 text-lg">Single project use</li>
<li class="mb-5 text-lg">Mutlivariate components</li>
<li class="mb-5 text-lg">Basic Features</li>
<li class="mb-5 text-lg">All components included</li>
</ul>
<a href="#"
class="border-2 transition block text-center px-6 py-3 rounded-md hover:bg-primary hover:text-white text-primary font-medium bg-primary/30 border-primary/50 absolute bottom-10 w-[calc(100%-80px)] left-10">Explore
More</a>
</div>
</div>
</div>
</div>
</section>
<section class="contact-section">
<div class="container mx-auto">
<div class="md:flex -mx-4">
<div class="w-full md:w-1/2 px-4">
<h3 class=" text-5xl leading-70 text-black capitalize mb-2 font-medium">Contact Sales</h3>
<p class="mb-5">Not sure where to start? Contact our sales team and we'll help you find the best
solution for
your needs.</p>
<a
class="text-white bg-black px-6 py-3 rounded-md hover:bg-transparent hover:text-black border border-black transition">Contact
Sales</a>
</div>
<div class="w-full md:w-1/2 px-4">
<h3 class=" text-5xl leading-70 text-black capitalize mb-2 font-medium">Newsletter</h3>
<p class="mb-5">Sign up for Soreal newsletters with product updates, event information, special
offers, and more.
</p>
<a href=""
class="text-white bg-black px-6 py-3 rounded-md hover:bg-transparent hover:text-black border border-black transition">Subscribe</a>
</div>
</div>
</div>
</section>
</body>
</html>