KeymailSpecials2/Components/Pages/Index.razor

361 lines
20 KiB
Plaintext

@page "/"
@inject Services.GlobalService gloService
<CanvasHomePage />
<PageTitle>Home - @gloService.WebsiteName</PageTitle>
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<Header1 ActiveChoice=Header1.enuChoice.Home />
<!-- Slider
============================================= -->
<section id="slider" class="slider-element bg-color" style="height: auto; padding: 60px 0; background: url('demos/movers/images/bg-2.png') no-repeat center center / 100% 100%;">
<div class="container mt-4" style="z-index: 2">
<div class="text-center">
<h2 class="text-white h2 fw-semibold mb-2">Welcome to<br /><img src="/images/logos/kms34a.png" width="20%" class="img-fluid" /></h2>
<p class="text-white-50"></p>
</div>
<div class="row mt-5 justify-content-center">
<div class="col-lg-6">
<ul class="nav nav-tabs nav-justified flex-column border-bottom-0 flex-md-row bg-color mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link py-3 active" id="login-tab" data-bs-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link py-3" id="register-tab" data-bs-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
<div class="tab-content rounded-bottom shadow bg-white py-4 px-5">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<p class="mb-4">Please enter your login information.</p>
<div class="form-widget">
<div class="form-result"></div>
<form class="row login-form position-relative mb-0" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
<div class="col-sm-6 form-group">
<div class="input-group">
<span class="input-group-text bg-transparent"><i class="bi-person"></i></span>
<input type="text" name="login-form-phone" id="login-form-phone" class="form-control required" value="" placeholder="Username">
</div>
</div>
<br>
<div class="col-sm-6 form-group">
<div class="input-group">
<span class="input-group-text bg-transparent"><i class="bi-calendar-week"></i></span>
<input type="text" class="form-control home-date required" name="login-form-date" id="login-form-date" value="" placeholder="Password">
</div>
</div>
<div class="col-12 d-none">
<input type="text" id="login-form-botcheck" name="login-form-botcheck" value="">
</div>
<div class="col-12">
<button type="submit" name="login-form-submit" class="btn bg-color text-white fw-medium w-100 py-2 mt-2">Login</button>
</div>
<input type="hidden" name="prefix" value="login-form-">
<input type="hidden" name="subject" value="Home Moving Request">
<input type="hidden" name="html_title" value="Home Moving">
</form>
</div>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<div class="form-widget">
<div class="form-result"></div>
<form class="row register-form position-relative mb-0" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
<div class="col-sm-6 form-group">
<div class="input-group">
<span class="input-group-text bg-transparent"><i class="bi-person"></i></span>
<input type="text" name="register-form-name" id="register-form-name" class="form-control required" value="" placeholder="Username">
</div>
</div>
<div class="col-sm-6 form-group">
<div class="input-group">
<span class="input-group-text bg-transparent"><i class="bi-calendar-week"></i></span>
<input type="text" class="form-control home-date required" name="register-form-date" id="register-form-date" value="" placeholder="Password">
</div>
</div>
<div class="col-sm-6 form-group">
<div class="input-group">
<span class="input-group-text bg-transparent"><i class="bi-envelope"></i></span>
<input type="email" name="register-form-email" id="register-form-email" class="form-control required" value="" placeholder="Email">
</div>
</div>
<div class="col-sm-6 form-group">
<div class="input-group">
<span class="input-group-text bg-transparent"><i class="bi-calendar-week"></i></span>
<input type="text" class="form-control home-date required" name="register-form-password" id="register-form-password" value="" placeholder="Confirm Password">
</div>
</div>
<div class="col-12 d-none">
<input type="text" id="register-form-botcheck" name="register-form-botcheck" value="">
</div>
<div class="col-12">
<button type="submit" name="register-form-submit" class="btn bg-color text-white fw-medium w-100 py-2 mt-2">Register</button>
</div>
<input type="hidden" name="prefix" value="register-form-">
<input type="hidden" name="subject" value="Office Moving Request">
<input type="hidden" name="html_title" value="Office Moving">
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-5 d-none d-lg-flex flex-wrap justify-content-center">
<img src="demos/movers/images/stats.svg" alt="Image 1" class="d-flex align-self-end ms-5 mt-3">
</div>
</div>
</div>
<div class="svg-separator">
<div>
<svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100" data-height="100">
<path style="opacity: 1;fill: rgba(255,255,255,0.75);" d="M1040,56c0.5,0,1,0,1.6,0c-16.6-8.9-36.4-15.7-66.4-15.7c-56,0-76.8,23.7-106.9,41C881.1,89.3,895.6,96,920,96
C979.5,96,980,56,1040,56z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.75);" d="M1699.8,96l0,10H1946l-0.3-6.9c0,0,0,0-88,0s-88.6-58.8-176.5-58.8c-51.4,0-73,20.1-99.6,36.8 c14.5,9.6,29.6,18.9,58.4,18.9C1699.8,96,1699.8,96,1699.8,96z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.75);" d="M1400,96c19.5,0,32.7-4.3,43.7-10c-35.2-17.3-54.1-45.7-115.5-45.7c-32.3,0-52.8,7.9-70.2,17.8 c6.4-1.3,13.6-2.1,22-2.1C1340.1,56,1340.3,96,1400,96z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.75);" d="M320,56c6.6,0,12.4,0.5,17.7,1.3c-17-9.6-37.3-17-68.5-17c-60.4,0-79.5,27.8-114,45.2 c11.2,6,24.6,10.5,44.8,10.5C260,96,259.9,56,320,56z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.75);" d="M680,96c23.7,0,38.1-6.3,50.5-13.9C699.6,64.8,679,40.3,622.2,40.3c-30,0-49.8,6.8-66.3,15.8 c1.3,0,2.7-0.1,4.1-0.1C619.7,56,620.2,96,680,96z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.75);" d="M-40,95.6c28.3,0,43.3-8.7,57.4-18C-9.6,60.8-31,40.2-83.2,40.2c-14.3,0-26.3,1.6-36.8,4.2V106h60V96L-40,95.6
z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M504,73.4c-2.6-0.8-5.7-1.4-9.6-1.4c-19.4,0-19.6,13-39,13c-19.4,0-19.5-13-39-13c-14,0-18,6.7-26.3,10.4 C402.4,89.9,416.7,96,440,96C472.5,96,487.5,84.2,504,73.4z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M1205.4,85c-0.2,0-0.4,0-0.6,0c-19.5,0-19.5-13-39-13s-19.4,12.9-39,12.9c0,0-5.9,0-12.3,0.1 c11.4,6.3,24.9,11,45.5,11C1180.6,96,1194.1,91.2,1205.4,85z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M1447.4,83.9c-2.4,0.7-5.2,1.1-8.6,1.1c-19.3,0-19.6-13-39-13s-19.6,13-39,13c-3,0-5.5-0.3-7.7-0.8 c11.6,6.6,25.4,11.8,46.9,11.8C1421.8,96,1435.7,90.7,1447.4,83.9z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M985.8,72c-17.6,0.8-18.3,13-37,13c-19.4,0-19.5-13-39-13c-18.2,0-19.6,11.4-35.5,12.8 c11.4,6.3,25,11.2,45.7,11.2C953.7,96,968.5,83.2,985.8,72z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M743.8,73.5c-10.3,3.4-13.6,11.5-29,11.5c-19.4,0-19.5-13-39-13s-19.5,13-39,13c-0.9,0-1.7,0-2.5-0.1 c11.4,6.3,25,11.1,45.7,11.1C712.4,96,727.3,84.2,743.8,73.5z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M265.5,72.3c-1.5-0.2-3.2-0.3-5.1-0.3c-19.4,0-19.6,13-39,13c-19.4,0-19.6-13-39-13 c-15.9,0-18.9,8.7-30.1,11.9C164.1,90.6,178,96,200,96C233.7,96,248.4,83.4,265.5,72.3z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M1692.3,96V85c0,0,0,0-19.5,0s-19.6-13-39-13s-19.6,13-39,13c-0.1,0-0.2,0-0.4,0c11.4,6.2,24.9,11,45.6,11 C1669.9,96,1684.8,96,1692.3,96z"></path>
<path style="opacity: 1;fill: rgba(255,255,255,0.3);;" d="M25.5,72C6,72,6.1,84.9-13.5,84.9L-20,85v8.9C0.7,90.1,12.6,80.6,25.9,72C25.8,72,25.7,72,25.5,72z"></path>
<path style="fill: rgb(255, 255, 255);" d="M-40,95.6C20.3,95.6,20.1,56,80,56s60,40,120,40s59.9-40,120-40s60.3,40,120,40s60.3-40,120-40s60.2,40,120,40s60.1-40,120-40s60.5,40,120,40s60-40,120-40s60.4,40,120,40s59.9-40,120-40s60.3,40,120,40s60.2-40,120-40s60.2,40,120,40s59.8,0,59.8,0l0.2,143H-60V96L-40,95.6z"></path>
</svg>
<div class="bg-white" style="height: 150px"></div>
</div>
</div>
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap pb-0">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-lg-7 text-center">
<div class="heading-block">
<h3 class="text-transform-none mb-3 fw-semibold ls-0">How We Elevate Your Business</h3>
<span class="text-black-50">KeyMotive offers a wide variety of marketing solutions to attract as many customers as possible.</span>
</div>
</div>
<div class="col-lg-8">
<div class="row align-items-center">
<div class="col-sm-6">
<img src="demos/movers/images/happy.svg" alt="stats">
</div>
<div class="col-sm-6">
<h3>Direct mail marketing programs which increase customer retention as well as new customer acquisition.</h3>
<p class="mb-2">Offering programs specifically targeted to increasing the number of customers who visit your business, we are your one-stop shop for all of your direct marketing needs.</p>
</div>
</div>
<div class="row align-items-center mt-5">
<div class="col-sm-6 mb-4 mb-sm-0">
<h3>Statistical predictive models using your customers&#39; transaction history.</h3>
<p class="mb-2">Our models know when one of your customers is in the market for one of your products or services.</p>
</div>
<div class="col-sm-6">
<img src="demos/movers/images/user_nums.svg" alt="Image 1">
</div>
</div>
<div class="row align-items-center mt-5">
<div class="col-sm-6">
<img src="demos/movers/images/privacy.svg" alt="Image 1">
</div>
<div class="col-sm-6">
<h3>Multi-channel marketing to reach the most scrutinous of today&#39;s customers.</h3>
<p class="mb-2">We can send your marketing messages throguh postal mail, email or text messaging, and adhering toall regulations pertaining to opt-out and consumer privacy.</p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="section p-0 dark mb-0" style="background: linear-gradient(to right, rgba(25,102,221,0.2), rgba(25,102,221,0.5)), url('demos/movers/images/section/backdrop.jpg') no-repeat center center / cover; min-height: 400px">
<div class="container">
<div class="row justify-content-between mb-4" style="padding: 260px 0 40px;">
<div class="col-lg-5 col-md-6 offset-lg-1 pt-3">
<h2 class="display-4 fw-bold text-white mt-6">Why Trust Us?</h2>
</div>
<div class="col-lg-5 col-md-6 mb-0 mb-md-5">
<h3 class="mb-2 text-white">What We Provide:</h3>
<div class="d-flex">
<ul class="col-6 iconlist">
<li class="my-2"><i class="bi-check-circle-fill fw-light"></i> <span class="ps-2">Data-Driven Approach</span></li>
<li class="my-2"><i class="bi-check-circle-fill fw-light"></i> <span class="ps-2">Ongoing Support</span></li>
<li class="my-2"><i class="bi-check-circle-fill fw-light"></i> <span class="ps-2">Proven Results</span></li>
</ul>
<ul class="col-6 iconlist">
<li class="my-2"><i class="bi-check-circle-fill fw-light"></i> <span class="ps-2">15 Years of Experience</span></li>
<li class="my-2"><i class="bi-check-circle-fill fw-light"></i> <span class="ps-2">Multi-Channel Marketing</span></li>
<li class="my-2"><i class="bi-check-circle-fill fw-light"></i> <span class="ps-2">Carefully Curated Content</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<br />
<br />
<div class="section section-features bg-transparent pb-0 mb-4">
<div class="container">
<div class="row col-mb-50 col-mb-lg-80">
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/1.jpg');">
<i class="bi-bar-chart-line"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Results Driven</h3>
<p class="text-muted">The numbers always tell a story. We want that story to be what you are looking for, so we analyze and adjust programs - finding ways to improve them.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/2.jpg');">
<i class="bi-building-check"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Collaboration</h3>
<p class="text-muted">The key to effective collaboration is open communication. A constructive dialogue will produce marketing programs that work for you.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/3.jpg');">
<i class="bi-hand-thumbs-up"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Excellence</h3>
<p class="text-muted">Perfection can be limited by its nature, but pursuing excellence is a journey with rewards. With every shop's unique needs, it is always a challenge worth accepting.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4">
<i class="bi-envelope-check"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Adaptability</h3>
<p class="text-muted">Word of mouth is still the best form of marketing. It's just not done face-to-face as much. So use the technology and adapt to today's environment. Enhance the customer journey.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/1.jpg');">
<i class="bi-check2-circle"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Accuracy</h3>
<p class="text-muted">Our models are finely tuned to know what your customers' needs are.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4">
<i class="bi-cloud-check"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Reliability</h3>
<p class="text-muted">We are always eager to collaborate with you to provide more value through your marketing channels. Your customer retention and satisfaction is our priority.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="section dark pt-0 mb-0 bg-color" style="background: url('demos/movers/images/bg-2.png') no-repeat center bottom / 100%; overflow: visible">
<svg viewBox="0 0 1960 206.8" class="bg-white">
<path class="svg-themecolor" style="opacity:0.2;" d="M0,142.8A2337.49,2337.49,0,0,1,297.5,56.3C569.33-3.53,783.89.22,849.5,2.3c215.78,6.86,382.12,45.39,503.25,73.45,158.87,36.8,283.09,79.13,458.75,54.55A816.49,816.49,0,0,0,1983,86.8v110H0Z"></path>
<path class="svg-themecolor" d="M.5,152.8s498-177,849-150,1031,238,1134,94v110H.5Z"></path>
</svg>
<div class="container">
<div class="row align-items-center justify-content-center text-center my-4">
<div class="col-sm-8">
<div class="heading-block border-bottom-0 mb-4">
<h2 class="fw-semibold ls-0 text-transform-none mb-3" style="font-size: 44px; line-height: 1.3">Contact Our Marketing Professionals</h2>
<p></p>
</div>
<a href="contact" class="button button-white button-light button-rounded fw-medium m-0">Get In Touch</a>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="bg-transparent border-0">
<!-- Copyrights
============================================= -->
<div id="copyrights" class="bg-transparent">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-6 text-black-50">
Copyright &copy; 2010 - @gloService.YearInFooter All Rights Reserved by KeyMotive LLC.
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
@code {
}