File: /mnt/data/dev/dev-dreamssalon-wp/landing/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="DreamSalon – Modern React template for hair salons, beauty spas, and wellness centers. Includes responsive pages, booking forms, gallery layouts, and a customer dashboard.">
<meta name="keywords" content="salon template, hair salon, beauty spa, wellness center, spa booking template, React template, responsive salon template, Dream Salon">
<meta name="author" content="Dreams Technologies">
<meta name="robots" content="index, follow">
<title>DreamSalon | Hair, Beauty & Spa React Template for Salons, Spas & Wellness</title>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/img/favicon.png">
<!-- Apple Icon -->
<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Tabler Icon CSS -->
<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Begin Page -->
<div class="main-wrapper">
<div data-bs-spy="scroll" data-bs-target="#scroll-nav" class="scrollspy-example">
<!-- Banner Start -->
<div class="banner-bg-section">
<!-- Header Start -->
<header class="header">
<div class="container">
<nav class="navbar navbar-expand-lg header-nav">
<div class="navbar-header">
<a id="mobile_btn" href="#" aria-label="Open mobile menu">
<span class="bar-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
<a href="index.html" class="navbar-brand logo">
<img src="assets/img/logo-white.svg" class="img-fluid" alt="DreamSalon Logo">
</a>
<a href="index.html" class="navbar-brand logo-small">
<img src="assets/img/logo.svg" class="img-fluid" alt="DreamSalon Logo">
</a>
</div>
<div class="main-menu-wrapper">
<div class="menu-header">
<a href="index.html" class="menu-logo">
<img src="assets/img/logo.svg" class="img-fluid" alt="Dream Salon Logo">
</a>
<a id="menu_close" class="menu-close" href="#"> <i class="ti ti-x"></i></a>
</div>
<ul class="main-nav navbar-nav home-nav" id="scroll-nav">
<li class="nav-item"><a href="#home" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#demos" class="nav-link">Demos</a></li>
<li class="nav-item"><a href="#features" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#inner-pages" class="nav-link">Inner Pages</a></li>
</ul>
</div>
<div class="nav header-navbar-rht">
<a href="#" class="btn btn-primary d-flex align-items-center"><i class="ti ti-shopping-cart me-2"></i>Purchase Theme</a>
</div>
</nav>
</div>
</header>
<!-- Header End -->
<!-- Banner Start -->
<div class="hero-section position-relative overflow-hidden" id="home">
<div class="container position-relative z-2">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="banner-content text-center wow fadeInUp" data-wow-delay="0.2s">
<div class="premiumauthor mb-5">
<div class="me-2 d-inline-flex justify-content-center align-items-center whitebg"><img src="assets/img/icons/fire-icon.png" alt="Premium Author" class="me-1">Hot Product</div>
Made From Elite Premium Author</div>
<h1 class="item-margin mb-3">
Elevate Your Beauty Business <img src="assets/img/icons/star-icon-1.svg" alt="program-icon-1" class="img-fluid"> <br> with <span>DreamSalon</span>
</h1>
<p class="item-margin-lg">
Perfectly designed for beauty salons, hair stylists, spas, wellness centers, and all beauty related businesses looking for a stunning online presence.
</p>
<div class="program-item">
<a href="#demos" class="btn btn-light d-flex mx-auto align-items-center"><i class="ti ti-player-play me-2"></i>Explore Demos</a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="text-center banner-imgs">
<img src="assets/img/icons/wp-icon.png" alt="react-icon" class="img-fluid wp-icon">
<img src="assets/img/icons/star-icon-1.svg" alt="star-icon" class="img-fluid star-icon">
<img src="assets/img/bg/home-page1.png" class="banner-img-1 img-fluid" alt="banner-01">
<img src="assets/img/bg/home-page3.png" class="banner-img-2" alt="banner-02">
<img src="assets/img/bg/home-page2.png" class="banner-img-3" alt="banner-03">
</div>
</div>
</div>
</div>
</div>
<!-- Banner End -->
</div>
<!-- Support start -->
<section class="support-section support-section-five">
<div class="horizontal-slide d-flex" data-direction="left" data-speed="slow">
<div class="slide-list d-flex">
<div class="support-item">
<h5>Easy To Customize</h5>
</div>
<div class="support-item">
<h5>RTL & LTR Ready Pages</h5>
</div>
<div class="support-item">
<h5>Dark & Light Mode</h5>
</div>
<div class="support-item">
<h5>3 Creative Homepages</h5>
</div>
<div class="support-item">
<h5>Multiple Listing Layouts</h5>
</div>
</div>
</div>
</section>
<!-- Support Section End -->
<!-- live demo start -->
<div class="live-demo-section position-relative section-padding" id="demos">
<div class="container">
<div class="section-heading text-center">
<h2 class="mb-2">Find the Perfect Demo for Every Need</h2>
<p>Explore different homepage styles through our live demos.</p>
</div>
<div class="row row-gap-4 justify-content-center">
<!-- Item 1 -->
<div class="col-lg-4 col-md-6">
<div class="demo-item item-padding border item-shadow rounded-2 item-hover text-center">
<div class="mb-3 live-demo-image">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/" target="_blank"><img src="assets/img/screens/screen-1.jpg" alt="demo-01" class="img-fluid demo-img"></a>
<div class="demo-layout">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/" class="btn btn-white btn-icon rounded-circle" target="_blank"> <i class="ti ti-arrow-right"></i></a>
</div>
</div>
<h5 class="d-flex align-items-center gap-3"><a href="https://dreamsalon-wp.dreamsmarketplace.com/" target="_blank"> Homepage 1 </a>
</h5>
</div>
</div>
<!-- Item 2 -->
<div class="col-lg-4 col-md-6">
<div class="demo-item item-padding border item-shadow rounded-2 item-hover text-center">
<div class="mb-3 live-demo-image">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/home-2/" target="_blank"><img src="assets/img/screens/screen-2.jpg" alt="demo-01" class="img-fluid demo-img"></a>
<div class="demo-layout">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/home-2/" class="btn btn-white btn-icon rounded-circle" target="_blank"> <i class="ti ti-arrow-right"></i></a>
</div>
</div>
<h5 class="d-flex align-items-center gap-3"><a href="https://dreamsalon-wp.dreamsmarketplace.com/home-2/" target="_blank"> Homepage 2 </a>
</h5>
</div>
</div>
<!-- Item 3 -->
<div class="col-lg-4 col-md-6">
<div class="demo-item item-padding border item-shadow rounded-2 item-hover text-center">
<div class="mb-3 live-demo-image">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/home-3/" target="_blank"><img src="assets/img/screens/screen-3.jpg" alt="demo-01" class="img-fluid demo-img"></a>
<div class="demo-layout">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/home-3/" class="btn btn-white btn-icon rounded-circle" target="_blank"> <i class="ti ti-arrow-right"></i></a>
</div>
</div>
<h5 class="d-flex align-items-center gap-3"><a href="https://dreamsalon-wp.dreamsmarketplace.com/home-3/" target="_blank"> Homepage 3 </a>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- live demo end -->
<!-- features start -->
<div class="features-section section-padding text-center position-relative" id="features">
<div class="container">
<div class="row row-gap-3 justify-content-center position-relative z-1">
<div class="col-lg-6 col-md-6 col-sm-12 d-flex">
<div class="features-item rounded-3 bg-white flex-fill">
<h4 class="mb-2">Build website with Elementor</h4>
<p class="mb-5">Bring your creative vision to life effortlessly with the Elementor Page Builder and launch beautiful websites in real time, with zero coding required.</p>
<img src="assets/img/icons/features-one.png" alt="features" class="img-fluid">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 d-flex">
<div class="features-item rounded-3 bg-white flex-fill">
<h4 class="mb-2">Seamless WooCommerce Integration</h4>
<p class="mb-5">Empower your travel business with the seamless flexibility of WooCommerce, making bookings, payments, and management effortless and efficient.</p>
<img src="assets/img/icons/features-two.png" alt="features" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="element-one"><img src="assets/img/icons/features-icon-top.png" alt="features icon"></div>
<div class="element-two"><img src="assets/img/icons/features-icon-bottom.png" alt="features icon"></div>
</div>
<!-- counter end -->
<!-- live demo 1 start -->
<div class="live-demo-section position-relative section-padding">
<div class="container">
<div class="section-heading text-center">
<h2 class="mb-2">Flexible Viewing Options</h2>
<p>Versatile Viewing Options to Showcase Your Salon in the Most Engaging.</p>
</div>
<div class="row row-gap-4 justify-content-center">
<!-- Item 1 -->
<div class="col-lg-4 col-md-6">
<div class="demo-item item-padding border item-shadow rounded-2 item-hover text-center">
<div class="mb-3 live-demo-image">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/service-grid/" target="_blank"><img src="assets/img/screens/screen-7.jpg" alt="demo-01" class="img-fluid demo-img"></a>
<div class="demo-layout">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/service-grid/" class="btn btn-white btn-icon rounded-circle" target="_blank"> <i class="ti ti-arrow-right"></i></a>
</div>
</div>
<h5 class="d-flex align-items-center gap-3"><a href="https://dreamsalon-wp.dreamsmarketplace.com/service-grid/" target="_blank"> Grid View </a>
</h5>
</div>
</div>
<!-- Item 2 -->
<div class="col-lg-4 col-md-6">
<div class="demo-item item-padding border item-shadow rounded-2 item-hover text-center">
<div class="mb-3 live-demo-image">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/service/fades-shaves/" target="_blank"><img src="assets/img/screens/screen-8.jpg" alt="demo-01" class="img-fluid demo-img"></a>
<div class="demo-layout">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/service/fades-shaves/" class="btn btn-white btn-icon rounded-circle" target="_blank"> <i class="ti ti-arrow-right"></i></a>
</div>
</div>
<h5 class="d-flex align-items-center gap-3"><a href="https://dreamsalon-wp.dreamsmarketplace.com/service/fades-shaves/" target="_blank"> List View </a>
</h5>
</div>
</div>
<!-- Item 3 -->
<div class="col-lg-4 col-md-6">
<div class="demo-item item-padding border item-shadow rounded-2 item-hover text-center">
<div class="mb-3 live-demo-image">
<a href="https://dreamsalon.dreamstechnologies.com/react/template/listing-map" target="_blank"><img src="assets/img/screens/screen-9.jpg" alt="demo-01" class="img-fluid demo-img"></a>
<div class="demo-layout">
<a href="https://dreamsalon.dreamstechnologies.com/react/template/listing-map" class="btn btn-white btn-icon rounded-circle" target="_blank"> <i class="ti ti-arrow-right"></i></a>
</div>
</div>
<h5 class="d-flex align-items-center gap-3"><a href="https://dreamsalon.dreamstechnologies.com/react/template/listing-map" target="_blank"> Detail View </a>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- live demo end -->
<!-- inner pages -->
<div class="inner-pages section-padding access-section features-section features-section-light" id="inner-pages">
<div class="section-heading text-center">
<h2 class="mb-2">Elegant Inner Pages & Sections</h2>
<p class="mb-0">Everything you need to run your salon online from seamless bookings to client.</p>
</div>
<div class="horizontal-slide inner-page-top" data-direction="left" role="list">
<div class="slide-list d-flex gap-3">
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/service/beard-trim-styling/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-10.jpg" alt="Listing Details Page Demo" class="img-fluid rounded-2">
</a>
</div>
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/faq/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-11.jpg" alt="faq" class="img-fluid rounded-2">
</a>
</div>
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/blog-list/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-12.jpg" alt="Blog Details Page Demo" class="img-fluid rounded-2">
</a>
</div>
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/about-us/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-13.jpg" alt="About Us Page Demo" class="img-fluid rounded-2">
</a>
</div>
</div>
</div>
<div class="horizontal-slide" data-direction="right" role="list">
<div class="slide-list d-flex gap-3">
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/contact-us/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-14.jpg" alt="Contact Us Page Demo" class="img-fluid rounded-2">
</a>
</div>
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/bridal-makeup-ideas-every-bride-should-consider-this/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-15.jpg" alt="Blog Post Details" class="img-fluid rounded-2">
</a>
</div>
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/blog-grid/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-16.jpg" alt="Blog Grid Page Demo" class="img-fluid rounded-2">
</a>
</div>
<div class="inner-page-item" role="listitem">
<a href="https://dreamsalon-wp.dreamsmarketplace.com/testimonials/" target="_blank"rel="noopener noreferrer">
<img src="assets/img/screens/screen-17.jpg" alt="Testimonials Page Demo" class="img-fluid rounded-2">
</a>
</div>
</div>
</div>
<div class="element-one elements"></div>
<div class="element-two elements"></div>
</div>
<!-- inner pages -->
<!-- live demo 1 start -->
<div class="live-demo-section position-relative section-padding">
<div class="container">
<div class="fav-plugins">
<h2 class="text-center mb-5">Supports Your Favourite Plugins</h2>
<div class="d-flex flex-wrap gap-4 align-items-center justify-content-center">
<div class="plugin-box">
<img src="assets/img/icons/woocommerce.png" alt="WooCommerce">
<h3>WooCommerce</h3>
</div>
<div class="plugin-box">
<img src="assets/img/icons/contact-form7.png" alt="Contact Form7">
<h3>Contact Form7</h3>
</div>
<div class="plugin-box">
<img src="assets/img/icons/elementor.png" alt="Elementor">
<h3>Elementor</h3>
</div>
<div class="plugin-box">
<img src="assets/img/icons/redux.png" alt="Redux Framework">
<h3>Redux Framework</h3>
</div>
<div class="plugin-box">
<img src="assets/img/icons/one-click-demo.png" alt="One Click Demo ">
<h3>One Click Demo</h3>
</div>
</div>
</div>
</div>
</div>
<!-- live demo end -->
<!-- Footer Start -->
<footer class="footer">
<div class="footer-top text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-8 col-xl-9">
<div class="badge">Made From Elite Premium Author</div>
<h2 class="display-3 mt-4 text-white item-margin-lg mb-0 text-center">
Build your personalized Salon Booking Platform with <span>DreamSalon</span>
</h2>
<div class="text-center">
<a href="#demos" class="btn btn-primary d-inline-flex align-items-center gap-2"> <i class="ti ti-shopping-cart"></i> Purchase Theme</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row align-items-center row-gap-4">
<div class="col-md-6 text-center text-md-start">
<p class="text-white">Copyrights 2026 © DreamSalon. All Rights Reserved. </p>
</div>
<div class="col-md-6">
<div class="social-icons text-center text-md-end">
<a href="https://www.facebook.com/dreamstechnologieslimited/" class="avatar rounded-2 avatar-lg" target="_blank"aria-label="facebook" rel="noopener noreferrer"><i class="ti ti-brand-facebook"></i></a>
<a href="https://www.instagram.com/dreamstechnologieslimited/" class="avatar rounded-2 avatar-lg" target="_blank"aria-label="instagram" rel="noopener noreferrer"><i class="ti ti-brand-instagram"></i></a>
<a href="https://www.linkedin.com/company/dreamstechnologieslimited/" class="avatar rounded-2 avatar-lg" target="_blank"aria-label="linkedin" rel="noopener noreferrer"><i class="ti ti-brand-linkedin"></i></a>
<a href="https://www.twitter.com/dreamstechnologieslimited/" class="avatar rounded-2 avatar-lg" target="_blank"aria-label="twitter" rel="noopener noreferrer"><i class="ti ti-brand-twitter"></i></a>
<a href="https://www.youtube.com/c/DreamTechnologiesLimited" class="avatar rounded-2 avatar-lg" target="_blank"aria-label="youtube" rel="noopener noreferrer"><i class="ti ti-brand-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer End -->
<div class="back-to-top">
<a class="back-to-top-icon align-items-center justify-content-center d-flex" href="#top" aria-label="Back to Top"><i class="ti ti-upload" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!-- End Page -->
<!-- jQuery -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<!-- Custom JS -->
<script src="assets/js/script.min.js"></script>
</body>
</html>