Lorem Ipsum is simply the of the printing and dummy text of typesetting..
Lorem Ipsum is simply dummy text of the printing and typesetting industry.....
read moreBasic UI Elements
Buttons
import Link from "next/link";
<div>
<Link href="#" > <a className="btn btn-gradient btn-pill color-1">read more</a> </Link>
<Link href="#" > <a className="btn btn-gradient btn-pill color-2">read more</a> </Link>
<Link href="#" > <a className="btn btn-light-bg btn-pill color-2"><span>read more</span></a> </Link>
<Link href="#" > <a className="btn btn-white btn-pill color-1"> <span>read more</span></a> </Link>
<Link href="#" > <a className="btn btn-solid color-3 btn-flat">read more</a> </Link>
<Link href="#" > <a className="btn btn-gradient btn-flat color-4">read more</a> </Link>
<Link href="#" > <a className="btn btn-light-bg color-3 btn-flat">read more</a> </Link>
<Link href="#" > <a className="btn btn-gradient color-4">read more</a> </Link>
<Link href="#" > <a className="btn btn-dashed btn-pill color-1"> <span>read more</span></a> </Link>
</div>
Tags
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
<div>
<span className="label label-solid label-pill color-1">new</span>
<span className="label label-dark label-pill">new</span>
<span className="label label-success label-pill">new</span>
<span className="label label-danger label-pill">new</span>
<span className="label label-gradient color-1">new</span>
<span className="label label-dark">new</span>
<span className="label label-success">new</span>
<span className="label label-danger">new</span>
<span className="label label-shadow">new</span>
<span className="label label-dark label-flat">new</span>
<span className="label label-success label-flat">new</span>
<span className="label label-danger label-flat">new</span>
<span className="label label-shadow label-flat">new</span>
<span className="label label-light label-flat color-3">new</span>
<span className="label label-light label-flat color-4">new</span>
<span className="label label-gradient label-lg color-4">new</span>
<span className="label label-solid label-lg label-flat color-3">new</span>
<span className="label label-white label-lg label-flat color-3">new</span>
<span className="label label-white label-lg color-1">new</span>
<span className="label label-white label-lg label-pill"><span class="gradient-1">new</span></span>
</div>
Title modules
Title 1
sale
Latest For Sale
<div className="title-1 pb-0">
<span className="label label-gradient color-1">sale</span>
<h2>Latest For Sale</h2>
<hr>
</div>
Title 2
Latest Property Listing
Discover New York’s best things to do, restaurants, theatre, nightlife and more
<div className="title-2">
<h2>Latest Property Listing</h2>
<p className="mb-0">Discover New York’s best things to do, restaurants, theatre, nightlife and more</p>
</div>
Title 3
Provided Services
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..
<div className="title-3 mb-0">
<svg className="title-svg">
<use xlinkHref="/assets/svg/icons.svg#title-line"></use>
</svg>
<h2>
Provided <span>Services</span>
</h2>
<p className="font-roboto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..</p>
</div>
Auto height adjustment
Ratio
Ratio Classes: Change your image proportion by just adding class
If you use image as background than add class ".bg-img" in image and add below class in parent.
- .ratio_40 - 40%
- .ratio_45 - 45%
- .ratio_50 - 50%
- .ratio_68 - 68%
- .ratio2_1 - 50%
- .ratio2_3 - 60%
- .ratio3_2 - 66.66%
- .ratio_landscape - 75%
- .ratio_square - 100%
- .ratio_asos - 127.77%
- .ratio_portrait - 150%
- .ratio1_2 - 200%
Ratio - "ratio2_3"
import { Container, Row, Col } from "reactstrap";
import Img from "../../../utils/BackgroundImageRatio";
<Row className="portfolio-section zoom-gallery-multiple gy-md-4 gy-3">
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/1.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/banner-image.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/3.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/4.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
</Row>
Ratio - "ratio_square"
import { Container, Row, Col } from "reactstrap";
import Img from "../../../utils/BackgroundImageRatio";
<Row className="portfolio-section ratio_square gy-md-4 gy-3">
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/1.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/banner-image.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/3.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/4.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
</Row>
Ratio - "ratio_portrait"
import { Container, Row, Col } from "reactstrap";
import Img from "../../../utils/BackgroundImageRatio";
<Row className="portfolio-section ratio_portrait gy-md-4 gy-3">
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/1.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/banner-image.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/3.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
<Col lg="3" sm="6" className="grid-item ">
<div className="grid-box">
<div className="overlay">
<div className="portfolio-image">
<Img src="/assets/images/4.jpg" className="bg-img" />
</div>
</div>
</div>
</Col>
</Row>
Icons
FontAwesome
Sheltos have mainly used FontAwesome Icons. FontAwesome icons available in FontAwesome.com/icons, other icons are available in svg file
how to use FontAwesome font
- You can place Font Awesome icons just about anywhere using a style prefix and the icon’s name.
- To reference an icon, you need to know two bits of information. 1) its name, prefixed with fa- (meaning “font awesome” naturally!) and 2) the style you want to use’s corresponding prefix**.
<div class="fluid-container pt-4 demo-icons">
<i class="fas fa-map-marker-alt"></i>
<i class="fas fa-phone-alt"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-globe"></i>
</div>
how to use Feather icon
- Firstly you have to run one command which is given bellow :
- As you see our given demo.
- See the complete list of icons at feathericons.com.
import { Settings, Home, Lock } from 'react-feather';
import { Settings, Home, Lock } from 'react-feather';
<div class="fluid-container pt-4 demo-icons">
<Lock />
<Settings />
<Home />
</div>
Charts
Apex Charts Example
import Chart from "react-apexcharts";
const overviewChartData = {
options: {
chart: {
type: 'area',
dropShadow: {
enabled: true,
top: 10,
left: 0,
blur: 3,
color: '#720f1e',
opacity: 0.15,
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
markers: {
strokeWidth: 4,
strokeColors: '#ffffff',
hover: {
size: 9,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
lineCap: 'butt',
width: 4,
},
legend: {
show: false,
},
colors: ['#ff5c41'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0.4,
stops: [0, 90, 100],
},
},
grid: {
xaxis: {
lines: {
borderColor: 'transparent',
show: false,
},
},
yaxis: {
lines: {
borderColor: 'transparent',
show: false,
},
},
padding: {
right: -112,
bottom: 0,
left: 15,
},
},
responsive: [
{
breakpoint: 1200,
options: {
grid: {
padding: {
right: -95,
},
},
},
},
{
breakpoint: 992,
options: {
grid: {
padding: {
right: -69,
},
},
},
},
],
yaxis: {
labels: {
formatter: function (value) {
return value + 'K';
},
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
show: false,
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
range: undefined,
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#ff5c41',
width: 1,
dashArray: 0,
},
},
},
tooltip: {
formatter: undefined,
},
},
series: [
{
name: '$2530.00',
data: [20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0],
},
],
};
const SalesOverview = () => {
<Chart options={overviewChartData?.options} series={overviewChartData?.series} id="overviewchart" type="area" height={280} />
);
};
export default SalesOverview;
<!-- apexchart js-->
<script src="../assets/js/chart/apex-chart/apex-chart.js"></script>
<script>
var options = {
series: [{
name: '$2530.00',
data: [20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0]
}],
chart: {
height: 280,
type: 'area',
dropShadow: {
enabled: true,
top: 10,
left: 0,
blur: 3,
color: '#720f1e',
opacity: 0.15
},
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
markers: {
strokeWidth: 4,
strokeColors: "#ffffff",
hover: {
size: 9,
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
lineCap: 'butt',
width: 4,
},
legend: {
show: false
},
colors: ["#ff5c41"],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0.4,
stops: [0, 90, 100]
}
},
grid: {
xaxis: {
lines: {
borderColor: 'transparent',
show: false,
}
},
yaxis: {
lines: {
borderColor: 'transparent',
show: false,
}
},
padding: {
right: -112,
bottom: 0,
left: 15
}
},
responsive: [{
breakpoint: 1200,
options: {
grid: {
padding: {
right: -95,
}
},
},
},
{
breakpoint: 992,
options: {
grid: {
padding: {
right: -69,
}
},
},
}
],
yaxis: {
labels: {
formatter: function (value) {
return value + "K";
}
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
show: false,
},
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",],
range: undefined,
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#ff5c41',
width: 1,
dashArray: 0,
},
},
},
tooltip: {
formatter: undefined,
},
};
var chart = new ApexCharts(document.querySelector("#overviewchart"), options);
chart.render();
</script>
Maps
Google Map
import Google from "../../../../components/listing/gridView/map/GoogleMap";
const GoogleMap = () => {
return (<Google />);
};
export default GoogleMap;
Leaflet Map
import React, { Fragment} from "react";
import { MapContainer } from "react-leaflet/MapContainer";
import { TileLayer } from "react-leaflet/TileLayer";
import "../../../../node_modules/leaflet/dist/leaflet.css";
const LeafletMap = () => {
return (
<Fragment>
{display && (
<MapContainer
className="jvector-map-height"
style={{ height: "100%", width: "100%" }}
zoom={13}
center={[51.505, -0.09]}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}>
<TileLayer attribution="© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
)}
</Fragment>
);
};
export default LeafletMap;
pigeon Map
import { Map, Marker } from "pigeon-maps";
import React from "react";
const PigeonMap = () => {
return (
<Map defaultCenter={[50.879, 4.6997]} defaultZoom={11}>
<Marker width={50} anchor={[50.879, 4.6997]} />
</Map>
);
};
export default PigeonMap;
Blog Modules
Type 1
January 9, 2019
import React from "react";
import Slider from "react-slick";
import { Col, Container, Row } from "reactstrap";
import { LatestPropertyDetail } from "../../../constValues/constValues";
import { blog2 } from "../../../data/slickSlider";
import BlogWrapBox from "../../elements/propertyBoxs/BlogWrapBox";
const BlogSection = ({ value }) => {
return (
<section className="ratio2_1 simple-blog">
<Container>
<Row>
<Col>
<div className="title-3">
<svg className="title-svg">
<use xlinkHref="/assets/svg/icons.svg#title-line"></use>
</svg>
<h2>
Latest <span>Blog</span>
</h2>
<p className="font-roboto">{LatestPropertyDetail}</p>
</div>
<Slider className="blog-2" {...blog2}>
{value &&
value.map((data, i) => (
<div key={i}>
<BlogWrapBox data={data} />
</div>
))}
</Slider>
</Col>
</Row>
</Container>
</section>
);
};
export default BlogSection;
Type 2
05
nov
Phonics ,Newyork
Twice profit than before you ever got in business.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
read more
import Link from "next/link";
import React from "react";
import { MapPin } from "react-feather";
import Img from "../../../utils/BackgroundImageRatio";
const BlogWrapBox = ({ data, masonry }) => {
return (
<div className="blog-wrap wow fadeInUp">
<div className="blog-image">
<div>{masonry ? <img src={data?.img} className="bg-img img-fluid" alt=" /> : <Img src={data?.img} className="bg-img img-fluid" alt=" />}</div>
<div className="blog-label">
<div>
<h3>{data?.date}</h3>
<span>{data?.month}</span>
</div>
</div>
</div>
<div className="blog-details">
<span>
<MapPin /> {data?.place}
</span>
<h3>
<Link href="/pages/blog-detail-pages/left-sidebar">
<a>{data?.title}</a>
</Link>
</h3>
<p className="font-roboto">{data?.detail}</p>
<Link href="/pages/blog-detail-pages/left-sidebar">
<a>read more</a>
</Link>
</div>
</div>
);
};
export default BlogWrapBox;
About Modules
Type 1
John David
Communicating with..
Johndavid@inspirythemes.comA real estate agent or broker is a person who represents sellers or buyers advised to consult a licensed.
View Portfolio
import Link from "next/link";
import React from "react";
import { Eye, Heart, Mail } from "react-feather";
import Slider from "react-slick";
import { Col, Container, Row } from "reactstrap";
import { Agent, Connect, MeetOurAgent, ViewPortfolio } from "../../../constValues/constValues";
import { about1 } from "../../../data/slickSlider";
import SocialAccounts from "../../elements/SocialAccounts";
const AboutSection = ({ value }) => {
return (
<section className="about-section slick-between">
<Container>
<Row>
<Col>
<div className="title-1">
<span className="label label-gradient">{Agent}</span>
<h2>{MeetOurAgent}</h2>
<hr />
</div>
<Slider className="about-wrap arrow-white" {...about1}>
{value &&
value.map((data, i) => (
<div key={i}>
<Row className="about-content">
<Col xl="6">
<div className="about-image">
<img src={data.img} className="img-fluid" alt=" />
<div className="about-overlay"></div>
<div className="overlay-content">
<SocialAccounts />
<span>{Connect}</span>
</div>
</div>
</Col>
<Col xl="6">
<div className="our-details">
<Link href="/agent/agent-profile">
<a>
<h6 className="d-flex">
{data.name}
<span className="label-heart ms-2">
<Heart />
</span>
</h6>
</a>
</Link>
<h3>{data.work}</h3>
<span className="font-roboto">
<Mail className="me-1" />
{data.email}
</span>
<p className="font-roboto">{data.detail}</p>
<Link href="/agent/agent-profile">
<a className="btn btn-gradient btn-pill mt-2">
<Eye />
{ViewPortfolio}
</a>
</Link>
</div>
</Col>
</Row>
</div>
))}
</Slider>
</Col>
</Row>
</Container>
</section>
);
};
export default AboutSection;
Type 2
John David
Wide Window Realty Group...
Johndavid@inspirythemes.comThey are responsible for managing employees. A construction foreman leads the work crew.
View Portfolio
import Link from "next/link";
import React from "react";
import { Eye, Mail } from "react-feather";
import Slider from "react-slick";
import { Col, Container, Row } from "reactstrap";
import { LatestPropertyDetail } from "../../../constValues/constValues";
import { about2 } from "../../../data/slickSlider";
import SocialAccounts from "../../elements/SocialAccounts";
const AboutSection = ({ value }) => {
return (
<section className="about-section slick-between pb-0 ratio_square">
<Container>
<Row>
<Col>
<div className="title-3">
<svg className="title-svg">
<use xlinkHref="/assets/svg/icons.svg#title-line"></use>
</svg>
<h2>
Our <span>Agent</span>
</h2>
<p className="font-roboto">{LatestPropertyDetail}</p>
</div>
<Slider className="about-wrap about-2" {...about2}>
{value &&
value.map((data, i) => (
<div key={i}>
<div className="about-content">
<div className="about-image">
<div>
<img src={data.img} className="img-fluid bg-img" alt=" />
</div>
<div className="about-overlay"></div>
<div className="overlay-content">
<SocialAccounts />
<span>Connect</span>
</div>
</div>
<div className="our-details">
<Link href="/agent/agent-profile">
<a>
<h6 className="d-flex">
{data.name}
<span className="label-heart ms-2">
<i className="fas fa-heart"></i>
</span>
</h6>
</a>
</Link>
<h3>{data.detail}</h3>
<span className="font-roboto">
<Mail className="me-1" />
{data.email}
</span>
<p className="font-roboto">{data.details}</p>
<Link href="/agent/agent-profile">
<a className="btn btn-solid btn-flat mt-2">
<Eye />
View Portfolio
</a>
</Link>
</div>
</div>
</div>
))}
</Slider>
</Col>
</Row>
</Container>
</section>
);
};
export default AboutSection;
Type 3
John David
an elegant wave of the hand...
Different types of housing can be used same physical type.
Robot@inspirythemes.com
import Link from "next/link";
import React from "react";
import Slider from "react-slick";
import { Col, Container, Row } from "reactstrap";
import { MeetOurAgent, PropertyServicesDetail } from "../../../constValues/constValues";
import { about3 } from "../../../data/slickSlider";
import Img from "../../../utils/BackgroundImageRatio";
import SocialAccounts from "../../elements/SocialAccounts";
const About = ({ value }) => {
return (
<section className="about-section slick-between">
<Container>
<Row className="ratio_asos">
<Col>
<div className="title-3 text-start">
<h2>{MeetOurAgent}</h2>
<p className="font-roboto">{PropertyServicesDetail}</p>
</div>
<Slider className="arrow-gradient arrow-right" {...about3}>
{value &&
value.map((data, i) => (
<div key={i}>
<div className="about-box wow fadeInUp">
<div className="bg-size agent-image">
<Img src={data.img} className="bg-img" />
<div className="overlay-agent">
<div className="agent-details">
<Link href="/agent/agent-profile">
<a>
<h6 className="d-flex">
{data.name}
<span className="label-heart ms-2">
<i className="fas fa-heart"></i>
</span>
</h6>
</a>
</Link>
<h5>{data.title}</h5>
<p className="font-roboto">{data.details}</p>
<span className="font-roboto">{data.email}</span>
<SocialAccounts />
</div>
</div>
</div>
</div>
</div>
))}
</Slider>
</Col>
</Row>
</Container>
</section>
);
};
export default About;
Service Modules
Type 1
Property Management
Property management is the control, maintenance of real estate and physical property.
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "reactstrap";
import { Discover, PropertyServices } from "../../../constValues/constValues";
const PropertyServicesSection = ({ value }) => {
return (
<section className="service-section service-1">
<Container>
<Row>
<Col>
<div className="title-2">
<h2>{PropertyServices}</h2>
<p>{Discover}</p>
</div>
<Row className=" property-service column-space">
{value?.map((data, i) => (
<Col xl="4" md="6" className=" wow fadeInUp" key={i}>
<div className="service-box">
<div className="icon-round">{data.img}</div>
<h3>
<Link href="/pages/other-pages/services">
<a>{data.title}</a>
</Link>
</h3>
<p>{data.details}</p>
</div>
</Col>
))}
</Row>
</Col>
</Row>
</Container>
</section>
);
};
export default PropertyServicesSection;
Type 2
Property Insurance
Property management is the control, maintenance of real estate and physical property.
view more
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "reactstrap";
import { LatestPropertyDetail, providerServices } from "../../../constValues/constValues";
const ServiceSection = ({ value }) => {
return (
<section className="service-section service-2 pb-0">
<Container>
<Row>
<Col>
<div className="title-3">
<svg className="title-svg">
<use xlinkHref="/assets/svg/icons.svg#title-line"></use>
</svg>
<h2 dangerouslySetInnerHTML={{ __html: providerServices }} />
<p className="font-roboto">{LatestPropertyDetail}</p>
</div>
<Row className=" property-service column-space">
{value &&
value.map((data, i) => (
<Col xl="4" md="6" className={` ${i === 2 ? "offset-xl-0 offset-md-3" : "} wow fadeInUp`} key={i}>
<div className="service-box">
<div className="hover-line">
<svg className="service-icon">
<use xlinkHref={data.img}></use>
</svg>
<div>
<svg className="icon-line-color">
<use xlinkHref="/assets/svg/icons.svg#line-straight"></use>
</svg>
</div>
</div>
<Link href="/pages/other-pages/services">
<a>
<h3>{data.title}</h3>
</a>
</Link>
<p className="font-roboto">{data.details}</p>
<Link href="/pages/other-pages/services">
<a className="btn btn-light-bg btn-flat">
<span>view more</span>
</a>
</Link>
</div>
</Col>
))}
</Row>
</Col>
</Row>
</Container>
</section>
);
};
export default ServiceSection;
Type 3
Mortgage Services
Residences can be classified by and how they are connected to neighbouring residences and land.
View details
import Link from "next/link";
import React from "react";
import Slider from "react-slick";
import { Col, Container, Row } from "reactstrap";
import { PropertyServices, PropertyServicesDetail } from "../../../constValues/constValues";
import { serviceSlider } from "../../../data/slickSlider";
const PropertyServicesSection = ({ value }) => {
return (
<section className="service-section service-bg">
<Container>
<div className="title-3 text-start">
<h2>{PropertyServices}</h2>
<p className="font-roboto">{PropertyServicesDetail}</p>
</div>
</Container>
<Container fluid={true}>
<Row>
<Col>
<Slider className="service-slider arrow-gradient arrow-right" {...serviceSlider}>
{value &&
value.map((data, i) => (
<div key={i}>
<div className="service-wrapper">
<div className="top-img-box">
<div>
<img src={data.img} className="img-fluid" alt=" />
</div>
</div>
<div className="service-details">
<h3>
<Link href="/pages/other-pages/services">
<a>{data.title}</a>
</Link>
</h3>
<p className="font-roboto">{data.details}</p>
<Link href="/pages/other-pages/services">
<a>View details</a>
</Link>
</div>
</div>
</div>
))}
</Slider>
</Col>
</Row>
</Container>
</section>
);
};
export default PropertyServicesSection;
Property Modules
Type 1
sale
10
France
Allen's Across Way
$6558.00*
This home provides wonderful entertaining spaces with a chef kitchen opening. Elegant retreat in a quiet Coral Gables setting..
Bed : 4
Baths : 4
Sq Ft : 5000
June 20, 2022
import Link from "next/link";
import React, { useState } from "react";
import { Camera } from "react-feather";
import ContentLoader from "react-content-loader";
import { useSelector } from "react-redux";
import ImageSlider from "../../elements/ImageSlider";
import PropertyLabel from "../../elements/PropertyLabel";
import ThumbnailSlider from "../../elements/ThumbnailSlider";
import AddToCompareProducts from "../AddToCompareProducts";
import AddToWhishList from "../AddToWhishList";
const PropertyBox = ({ data, relativeSlider, video }) => {
const [load, setLoad] = useState(true);
const { symbol, currencyValue } = useSelector((state) => state.currencyReducer);
return (
<>
{!load ? (
<div className="property-box">
<div className="property-image">
{relativeSlider ?
<ThumbnailSlider images={data.img} videoData={data.video} video={video} /> :
<ImageSlider images={data.img} />}
<div className="labels-left">
<PropertyLabel labels={data.label} />
</div>
{!relativeSlider && (
<>
<div className="seen-data">
<Camera />
<span>{data.img.length || 5}</span>
</div>
<div className="overlay-property-box">
<a className="effect-round" title="Compare">
<AddToCompareProducts id={data.id} />
</a>
<a className="effect-round like" title="wishlist">
<AddToWhishList id={data.id} />
</a>
</div>
</>
)}
</div>
<div className="property-details">
<span className="font-roboto">{data.country || "USA"} </span>
<Link href={Array.isArray(data.img) ? `/property/image-slider/?id=${data.id}` : `/property/image-box/?id=${data.id}`}>
<a>
<h3>{data.title}</h3>
</a>
</Link>
<h6>
{symbol}
{(data.price * currencyValue).toFixed(2) || (48596.0 * currencyValue).toFixed(2)}*
</h6>
<p className="font-roboto">{data.details || "This home provides wonderful entertaining spaces with a chef kitchen opening. Elegant retreat in a quiet Coral Gables setting.."} </p>
<ul>
<li>
<img src="/assets/images/svg/icon/double-bed.svg" className="img-fluid" alt=" />
Bed : {data.bed || 5}
</li>
<li>
<img src="/assets/images/svg/icon/bathroom.svg" className="img-fluid" alt=" />
Baths : {data.bath || 5}
</li>
<li>
<img src="/assets/images/svg/icon/square-ruler-tool.svg" className="img-fluid ruler-tool" alt=" />
Sq Ft : {data.sqft || 5}
</li>
</ul>
<div className="property-btn d-flex">
<span>{data.date}</span>
<Link href={Array.isArray(data.img) ? `/property/image-slider/?id=${data.id}` : `/property/image-box/?id=${data.id}`}>
<a>
<button type="button" className="btn btn-dashed btn-pill">
Details
</button>
</a>
</Link>
</div>
</div>
</div>
) : (
<>
<ContentLoader className="skeleton-svg">
{setTimeout(() => {
setLoad(false);
}, 1000)}
<rect className="skeleton-img" />
<rect className="skeleton-c1" />
<rect className="skeleton-c2" />
<rect className="skeleton-c3" />
</ContentLoader>
</>
)}
</>
);
};
export default PropertyBox;
Type 2
sale
High Valley Fields
A great name for a ranch surrounded by valleys. This home provides wonderful entertaining spaces with a chef kitchen opening.
-
Virtual Home
-
2000 Sq Ft
-
6 Rooms
-
2022
import { Col, Container, Row } from "reactstrap";
import { propertyDescription, propertyListing } from "../../../constValues/constValues";
import PropertyBoxThree from "../../elements/propertyBoxs/PropertyBoxThree";
const PropertySection = ({ value, size }) => {
return (
<section className="property-section pb-0">
<Container fluid={size && true}>
<Row className="ratio_63 zoom-gallery property-box-flat">
<Col>
<div className="title-3">
<svg className="title-svg">
<use xlinkHref="/assets/svg/icons.svg#title-line"></use>
</svg>
<h2 dangerouslySetInnerHTML={{ __html: propertyListing }}></h2>
<p className="font-roboto">{propertyDescription}</p>
</div>
<Row className={`column-space ${size && "no-slider-property"}`}>
{value &&
value.slice(0, `${size ? 8 : 6}`).map((data, i) => (
<Col xl="4" md="6" xxl={size && size} className="wow fadeInUp" key={i}>
<PropertyBoxThree data={data} />
</Col>
))}
</Row>
</Col>
</Row>
</Container>
</section>
);
};
export default PropertySection;
Type 3
$6558.00*
-
Virtual Home
-
5000 Sq Ft
-
6 Rooms
-
2019
import Link from "next/link";
import React from "react";
import { useSelector } from "react-redux";
import Img from "../../../utils/BackgroundImageRatio";
const PropertyBoxFive = ({ data }) => {
const { symbol, currencyValue } = useSelector((state) => state.currencyReducer);
return (
<div className='property-box'>
<div className='property-image'>
<a>
<Img src={data?.img} className='bg-img' />
</a>
<div className='overlay-property'>
<div className='overlay-box'>
<h4>{data?.title}</h4>
<p className='font-roboto'>{data?.details}</p>
<Link href={`/property/image-box/?id=${data.id}`}>
<a>View Details</a>
</Link>
</div>
</div>
</div>
<div className='text-center'>
<span className='label label-gradient label-lg'>
{symbol}
{(data?.price * currencyValue).toFixed(2)}*
</span>
</div>
<div className='property-details'>
<ul className='icon-property'>
<li>
<div className='d-flex'>
<div className='property-icon'>
<svg className='property-svg'>
<use xlinkHref='/assets/svg/icons.svg#home-heart'></use>
</svg>
</div>
<span>{data?.home}</span>
</div>
</li>
<li>
<div className='d-flex'>
<div className='property-icon'>
<svg className='property-svg'>
<use xlinkHref='/assets/svg/icons.svg#ruler'></use>
</svg>
</div>
<span>{data?.sqft} Sq Ft</span>
</div>
</li>
</ul>
<ul className='icon-property mb-0'>
<li>
<div className='d-flex'>
<div className='property-icon'>
<svg className='property-svg'>
<use xlinkHref='/assets/svg/icons.svg#key'></use>
</svg>
</div>
<span>{data?.rooms} Rooms</span>
</div>
</li>
<li>
<div className='d-flex'>
<div className='property-icon'>
<svg className='property-svg'>
<use xlinkHref='/assets/svg/icons.svg#safety'></use>
</svg>
</div>
<span>{data?.date}</span>
</div>
</li>
</ul>
</div>
</div>
);
};
export default PropertyBoxFive;