Laravel 8 Project: Home Services - Project & Layout Setup
In this video, we will learn about creating a new Laravel 8 project and setting up the layout for the Home Services project.
First, let's create a new Laravel 8 project. Switch to the command prompt and type the command:
composer create-project laravel/laravel HomeServices
Once the project is created, navigate to the project directory:
cd HomeServices
Next, let's install Livewire:
composer require livewire/livewire
After installing Livewire, open the project in Visual Studio Code:
Open Visual Studio Code, click on "Open Folder", and select the project directory. Then, click on "Open".
Now, let's configure the database. Open phpMyAdmin, click on "Databases", and enter a new database name:
homeservicesdb
Switch to the project and open the .env file. Add the database name, username, and password:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homeservicesdb
DB_USERNAME=root
DB_PASSWORD=
Run the project by switching to the command prompt and typing the command:
Php artisan serve
Open a browser and navigate to http://localhost:8000. You will see the default Laravel 8 welcome page.
Next, let's get the HTML template for this project. Go to Google and search for "Surfside Media Github". Click on the first link, and you will see the Laravel 8 Project Home Services Repository. Click on this repository, and you can download the template .zip file.
After extracting the template .zip file, you will get the following files:
Now, let's use this HTML template in our project. First, create a layout page in our project:
Switch to the project, navigate to the resources directory, then views, and create a new folder called Layouts. Inside the Layouts directory, create a new file called base.blade.php. This is our layout file.
Open the HTML template directory, open index.html in a text editor, select all, and copy the text. Paste the text into the base.blade.php file.
Make changes to the base.blade.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SurfsideMedia - Online Service Provider for your House Needs</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{{asset('assets/img/favicon.png')}}">
<link href="{{asset('assets/css/style.css')}}" rel="stylesheet" media="screen">
<link href="{{ asset('assets/css/chblue.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('assets/css/theme-responsive.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('assets/css/dtb/jquery.dataTables.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('assets/css/toastr.min.css') }}" rel="stylesheet" media="screen">
<script type="text/javascript" src="{{ asset('assets/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/jquery-ui.1.10.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/toastr.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/modernizr.js') }}"></script>
@livewireStyles
</head>
<body>
<div id="layout">
<div class="info-head">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="visible-md visible-lg text-left">
<li><a href="tel:+911234567890"><i class="fa fa-phone"></i> +91-1234567890</a></li>
<li><a href="mailto:contact@surfsidemedia.in"><i class="fa fa-envelope"></i>
contact@surfsidemedia.in</a></li>
</ul>
<ul class="visible-xs visible-sm">
<li class="text-left"><a href="tel:+911234567890"><i class="fa fa-phone"></i>
+91-1234567890</a></li>
<li class="text-right"><a href="index.php/changelocation.html"><i
class="fa fa-map-marker"></i> Faridabad, Haryana</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="visible-md visible-lg text-right">
<li><i class="fa fa-comment"></i> Live Chat</li>
<li><a href="index.php/changelocation.html"><i class="fa fa-map-marker"></i> Faridabad,
Haryana</a></li>
</ul>
</div>
</div>
</div>
</div>
<header id="header" class="header-v3">
<nav class="flat-mega-menu">
<label for="mobile-button"> <i class="fa fa-bars"></i></label>
<input id="mobile-button" type="checkbox">
<ul class="collapse">
<li class="title">
<a href="index.php.html"><img src="{{ asset('images/logo.png') }}"></a>
</li>
<li> <a href="javascript:void(0);">Air Conditioners</a>
<ul class="drop-down one-column hover-fade">
<li><a href="service-details/ac-wet-servicing.html">Wet Servicing</a></li>
<li><a href="service-details/ac-dry-servicing.html">Dry Servicing</a></li>
<li><a href="service-details/ac-installation.html">Installation</a></li>
<li><a href="service-details/ac-uninstallation.html">Uninstallation</a></li>
<li><a href="service-details/ac-gas-top-up.html">Gas Top Up</a></li>
<li><a href="service-details/ac-gas-refill.html">Gas Refill</a></li>
<li><a href="service-details/ac-repair.html">Repair</a></li>
</ul>
</li>
<li> <a href="#">Appliances</a>
<ul class="drop-down one-column hover-fade">
<li><a href="servicesbycategory/11.html">Computer Repair</a></li>
<li><a href="servicesbycategory/12.html">TV</a></li>
<li><a href="servicesbycategory/1.html">AC</a></li>
<li><a href="servicesbycategory/14.html">Geyser</a></li>
<li><a href="servicesbycategory/21.html">Washing Machine</a></li>
<li><a href="servicesbycategory/22.html">Microwave Oven</a></li>
<li><a href="servicesbycategory/9.html">Chimney and Hob</a></li>
<li><a href="servicesbycategory/10.html">Water Purifier</a></li>
<li><a href="servicesbycategory/13.html">Refrigerator</a></li>
</ul>
</li>
<li> <a href="#">Home Needs</a>
<ul class="drop-down one-column hover-fade">
<li><a href="servicesbycategory/19.html">Laundry</a></li>
<li><a href="servicesbycategory/4.html">Electrical</a></li>
<li><a href="servicesbycategory/8.html">Pest Control</a></li>
<li><a href="servicesbycategory/7.html">Carpentry</a></li>
<li><a href="servicesbycategory/3.html">Plumbing </a></li>
<li><a href="servicesbycategory/20.html">Painting</a></li>
<li><a href="servicesbycategory/17.html">Movers & Packers</a></li>
<li><a href="servicesbycategory/5.html">Shower Filters </a></li>
</ul>
</li>
<li> <a href="#">Home Cleaning</a>
<ul class="drop-down one-column hover-fade">
<li><a href="service-details/bedroom-deep-cleaning.html">Bedroom Deep Cleaning</a></li>
<li><a href="service-details/overhead-water-storage.html">Overhead Water Storage </a></li>
<li><a href="/service-details/tank-cleaning">Tank Cleaning</a></li>
<li><a href="service-details/underground-sump-cleaning.html">Underground Sump Cleaning</a>
</li>
<li><a href="service-details/dining-chair-shampooing.html">Dining Chair Shampooing </a></li>
<li><a href="service-details/office-chair-shampooing.html">Office Chair Shampooing</a></li>
<li><a href="service-details/home-deep-cleaning.html">Home Deep Cleaning </a></li>
<li><a href="service-details/carpet-shampooing.html">Carpet Shampooing </a></li>
<li><a href="service-details/fabric-sofa-shampooing.html">Fabric Sofa Shampooing</a></li>
<li><a href="service-details/bathroom-deep-cleaning.html">Bathroom Deep Cleaning</a></li>
<li><a href="service-details/floor-scrubbing-polishing.html">Floor Scrubbing & Polishing
</a></li>
<li><a href="service-details/mattress-shampooing.html">Mattress Shampooing </a></li>
<li><a href="service-details/kitchen-deep-cleaning.html">Kitchen Deep Cleaning </a></li>
</ul>
</li>
<li> <a href="#">Special Services</a>
<ul class="drop-down one-column hover-fade">
<li><a href="servicesbycategory/16.html">Document Services</a></li>
<li><a href="servicesbycategory/15.html">Cars & Bikes</a></li>
<li><a href="servicesbycategory/17.html">Movers & Packers </a></li>
<li><a href="servicesbycategory/18.html">Home Automation</a></li>
</ul>
</li>
<li class="login-form"> <a href="index.php/register.html" title="Register">Register</a></li>
<li class="login-form"> <a href="login.html" title="Login">Login</a></li>
<li class="search-bar">
</li>
</ul>
</nav>
</header>
{{$slot}}
<footer id="footer" class="footer-v1">
<div class="container">
<div class="row visible-md visible-lg">
<div class="col-md-3 col-xs-6 col-sm-6">
<h3>APPLIANCE SERVICES </h3>
<ul>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/12.html">TV</a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/14.html">Geyser</a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/13.html">Refrigerator</a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/21.html">Washing Machine</a>
</li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/22.html">Microwave Oven</a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/10.html">Water Purifier</a></li>
</ul>
</div>
<div class="col-md-3 col-xs-6 col-sm-6">
<h3>AC SERVICES </h3>
<ul>
<li><i class="fa fa-check"></i> <a
href="service-details/ac-installation.html">Installation</a></li>
<li><i class="fa fa-check"></i> <a
href="service-details/ac-uninstallation.html">Uninstallation</a></li>
<li><i class="fa fa-check"></i> <a href="service-details/ac-repair.html">AC Repair</a></li>
<li><i class="fa fa-check"></i> <a href="service-details/ac-gas-refill.html">Gas Refill</a>
</li>
<li><i class="fa fa-check"></i> <a href="service-details/ac-wet-servicing.html">Wet
Servicing</a></li>
<li><i class="fa fa-check"></i> <a href="service-details/ac-dry-servicing.html">Dry
Servicing </a></li>
</ul>
</div>
<div class="col-md-3 col-xs-6 col-sm-6">
<h3>HOME NEEDS </h3>
<ul>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/19.html">Laundry </a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/4.html">Electrical</a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/8.html">Pest Control </a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/7.html">Carpentry </a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/3.html">Plumbing </a></li>
<li><i class="fa fa-check"></i> <a href="servicesbycategory/20.html">Painting </a></li>
</ul>
</div>
<div class="col-md-3 col-xs-6 col-sm-6">
<h3>CONTACT US</h3>
<ul class="contact_footer">
<li class="location">
<i class="fa fa-map-marker"></i> <a href="#"> Faridabad, Haryana, India</a>
</li>
<li>
<i class="fa fa-envelope"></i> <a
href="mailto:contact@surfsidemedia.in">contact@surfsidemedia.in</a>
</li>
<li>
<i class="fa fa-headphones"></i> <a href="tel:+911234567890">+91-1234567890</a>
</li>
</ul>
<h3 style="margin-top: 10px">FOLLOW US</h3>
<ul class="social">
<li class="facebook"><span><i class="fa fa-facebook"></i></span><a href="#"></a></li>
<li class="twitter"><span><i class="fa fa-twitter"></i></span><a href="#"></a></li>
<li class="github"><span><i class="fa fa-instagram"></i></span><a href="#"></a></li>
</ul>
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-md-6">
<h3 class="mlist-h">CONTACT US</h3>
<ul class="contact_footer mlist">
<li class="location">
<i class="fa fa-map-marker"></i> <a href="#"> Faridabad, Haryana, India</a>
</li>
<li>
<i class="fa fa-envelope"></i> <a
href="mailto:contact@surfsidemedia.in">contact@surfsidemedia.in</a>
</li>
<li>
<i class="fa fa-phone"></i> <a href="tel:+911234567890">+91-1234567890</a>
</li>
</ul>
<ul class="social mlist-h">
<li class="facebook"><span><i class="fa fa-facebook"></i></span><a href="#"></a></li>
<li class="twitter"><span><i class="fa fa-twitter"></i></span><a href="#"></a></li>
<li class="github"><span><i class="fa fa-instagram"></i></span><a href="#"></a></li>
</ul>
</div>
</div>
</div>
<div class="footer-down">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="nav-footer">
<li><a href="about-us.html">About Us</a> </li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="terms-of-use.html">Terms of Use</a></li>
<li><a href="privacy.html">Privacy</a></li>
</ul>
</div>
<div class="col-md-6">
<p class="text-xs-center crtext">© 2021 SurfsideMedia. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="{{ asset('assets/js/nav/jquery.sticky.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/totop/jquery.ui.totop.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/accordion/accordion.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/rs-plugin/js/jquery.themepunch.tools.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/rs-plugin/js/jquery.themepunch.revolution.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/maps/gmap3.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/fancybox/jquery.fancybox.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/carousel/carousel.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/filters/jquery.isotope.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/twitter/jquery.tweet.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/flickr/jflickrfeed.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/theme-options/theme-options.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/theme-options/jquery.cookies.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap/bootstrap-slider.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/dtb/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/dtb/jquery.table2excel.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/dtb/script.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/validation-rule.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap3-typeahead.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/main.js') }}"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.tp-banner').show().revolution({
dottedOverlay: "none",
delay: 5000,
startwidth: 1170,
startheight: 480,
minHeight: 250,
navigationType: "none",
navigationArrows: "solo",
navigationStyle: "preview1"
});
});
</script>
@livewireScripts
</body>
</html>
Here, we use the @slot directive to render the Livewire component. Add @livewireStyles for Livewire CSS, and before closing the body tag, add @livewireScripts for Livewire scripts.
Next, let's create a Livewire component for the home page:
Switch to the command prompt, and type the command:
Php aritisan make:livewire Home
Switch to the project, open the home component class file, and inside the render method, add the layout:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class HomeComponent extends Component
{
public function render()
{
return view('livewire.home-component')->layout('layouts.base');
}
}
Open the home component view file, copy the main part of the text from the index.html template file, and paste it into the home component. Modify the image URLs and add the asset directive, which points to the public directory:
<div>
<section class="tp-banner-container">
<div class="tp-banner">
<ul>
<li data-transition="slidevertical" data-slotamount="1" data-masterspeed="1000"
data-saveperformance="off" data-title="Slide">
<img src="{{ asset('assets/img/slide/1.jpg') }}" alt="fullslide1" data-bgposition="center center"
data-kenburns="on" data-duration="6000" data-ease="Linear.easeNone" data-bgfit="130"
data-bgfitend="100" data-bgpositionend="right center">
</li>
<li data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000"
data-saveperformance="off" data-title="Slide">
<img src="{{ asset('assets/img/slide/2.jpg') }}" alt="fullslide1" data-bgposition="top center"
data-kenburns="on" data-duration="6000" data-ease="Linear.easeNone" data-bgfit="130"
data-bgfitend="100" data-bgpositionend="right center">
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
<div class="filter-title">
<div class="title-header">
<h2 style="color:#fff;">BOOK A SERVICE</h2>
<p class="lead">Book a service at very affordable price, </p>
</div>
<div class="filter-header">
<form id="sform" action="searchservices" method="post">
<input type="text" id="q" name="q" required="required" placeholder="What Services do you want?"
class="input-large typeahead" autocomplete="off">
<input type="submit" name="submit" value="Search">
</form>
</div>
</div>
</section>
<section class="content-central">
<div class="content_info content_resalt">
<div class="container" style="margin-top: 40px;">
<div class="row">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul id="sponsors" class="tooltip-hover">
<li data-toggle="tooltip" title="" data-original-title="AC"> <a
href="servicesbycategory/1.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="AC"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Beauty"> <a
href="servicesbycategory/2.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Beauty"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Plumbing"> <a
href="servicesbycategory/3.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Plumbing"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Electrical"> <a
href="servicesbycategory/4.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Electrical"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Shower Filter"> <a
href="servicesbycategory/5.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Shower Filter"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Home Cleaning"> <a
href="servicesbycategory/6.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Home Cleaning"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Carpentry"> <a
href="servicesbycategory/7.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Carpentry"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Pest Control"> <a
href="servicesbycategory/8.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Pest Control"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Chimney Hob"> <a
href="servicesbycategory/9.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Chimney Hob"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Water Purifier"> <a
href="servicesbycategory/10.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Water Purifier"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Computer Repair"> <a
href="servicesbycategory/11.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Computer Repair"></a></li>
<li data-toggle="tooltip" title="" data-original-title="TV"> <a
href="servicesbycategory/12.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="TV"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Refrigerator"> <a
href="servicesbycategory/13.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Refrigerator"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Geyser"> <a
href="servicesbycategory/14.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Geyser"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Car"> <a
href="servicesbycategory/15.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Car"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Document"> <a
href="servicesbycategory/16.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Document"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Movers & Packers"> <a
href="servicesbycategory/17.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Movers & Packers"></a></li>
<li data-toggle="tooltip" title="" data-original-title="Home Automation"> <a
href="servicesbycategory/18.html"><img src="{{ asset('images/sercat/service-icon.png') }}"
alt="Home Automation"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="semiboxshadow text-center">
<img src="{{ asset('assets/img/img-theme/shp.png') }}" class="img-responsive" alt="">
</div>
<div class="content_info">
<div>
<div class="container">
<div class="row">
<div class="titles">
<h2>SurfsideMedia <span>Choice</span> of Services</h2>
<i class="fa fa-plane"></i>
<hr class="tall">
</div>
</div>
<div class="portfolioContainer" style="margin-top: -50px;">
<div class="col-xs-6 col-sm-4 col-md-3 hsgrids"
style="padding-right: 5px;padding-left: 5px;">
<a class="g-list" href="service-details/ac-dry-servicing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="AC Dry Servicing"
class="img-responsive">
</div>
<div class="info-gallery">
<h3>AC Dry Servicing</h3>
<hr class="separator">
<p>AC Dry Servicing</p>
<div class="content-btn"><a href="service-details/ac-dry-servicing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>300</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 hsgrids"
style="padding-right: 5px;padding-left: 5px;">
<a class="g-list" href="service-details/ac-installation.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="AC Installation"
class="img-responsive">
</div>
<div class="info-gallery">
<h3>AC Installation</h3>
<hr class="separator">
<p>AC Installation</p>
<div class="content-btn"><a href="service-details/ac-installation.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>320</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 hsgrids"
style="padding-right: 5px;padding-left: 5px;">
<a class="g-list" href="service-details/ac-gas-top-up.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="AC Gas Top Up"
class="img-responsive">
</div>
<div class="info-gallery">
<h3>AC Gas Top Up</h3>
<hr class="separator">
<p>AC Gas Top Up</p>
<div class="content-btn"><a href="service-details/ac-gas-top-up.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>320</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 hsgrids"
style="padding-right: 5px;padding-left: 5px;">
<a class="g-list" href="service-details/ac-gas-refill.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="AC Gas Refill"
class="img-responsive">
</div>
<div class="info-gallery">
<h3>AC Gas Refill</h3>
<hr class="separator">
<p>AC Gas Refill</p>
<div class="content-btn"><a href="service-details/ac-gas-refill.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>510</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="content_info">
<div class="bg-dark color-white border-top">
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="services-lines-info">
<h2>WELCOME TO DIVERSIFIED</h2>
<p class="lead">
Book best services at one place.
<span class="line"></span>
</p>
<p>Find a wide variety of home services.</p>
</div>
</div>
<div class="col-md-8">
<ul class="services-lines">
<li>
<a href="servicesbycategory/1.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>AC</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/3.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>Plumbing</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/4.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>Electrical</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/6.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>Home Cleaning</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/8.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>Pest Control</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/11.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>Computer Repair</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/12.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>TV</h5>
</div>
</a>
</li>
<li>
<a href="servicesbycategory/13.html">
<div class="item-service-line">
<i class="fa"><img class="icon-img"
src="{{ asset('images/sercat/service-icon.png') }}"></i>
<h5>Refrigerator</h5>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="titles">
<h2><span>Appliance</span>Services</h2>
<i class="fa fa-plane"></i>
<hr class="tall">
</div>
</div>
</div>
<div id="boxes-carousel">
<div>
<a class="g-list" href="service-details/ac-wet-servicing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>AC Wet Servicing</h3>
<hr class="separator">
<p>AC Wet Servicing</p>
<div class="content-btn"><a href="service-details/ac-wet-servicing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>200</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/bedroom-deep-cleaning.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Bedroom Deep Cleaning</h3>
<hr class="separator">
<p>Bedroom Deep Cleaning</p>
<div class="content-btn"><a href="service-details/bedroom-deep-cleaning.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>300</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/dining-chair-shampooing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Dining Chair Shampooing</h3>
<hr class="separator">
<p>Dining Chair Shampooing</p>
<div class="content-btn"><a href="service-details/dining-chair-shampooing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>400</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/carpet-shampooing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Carpet Shampooing</h3>
<hr class="separator">
<p>Carpet Shampooing</p>
<div class="content-btn"><a href="service-details/carpet-shampooing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>200</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/fabric-sofa-shampooing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Fabric Sofa Shampooing</h3>
<hr class="separator">
<p>Fabric Sofa Shampooing</p>
<div class="content-btn"><a href="service-details/fabric-sofa-shampooing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>211</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/bathroom-deep-cleaning.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Bathroom Deep Cleaning</h3>
<hr class="separator">
<p>Bathroom Deep Cleaning</p>
<div class="content-btn"><a href="service-details/bathroom-deep-cleaning.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>233</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/floor-scrubbing-polishing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Floor Scrubbing & Polishing</h3>
<hr class="separator">
<p>Floor Scrubbing & Polishing</p>
<div class="content-btn"><a href="service-details/floor-scrubbing-polishing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>411</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/mattress-shampooing.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Mattress Shampooing</h3>
<hr class="separator">
<p>Mattress Shampooing</p>
<div class="content-btn"><a href="service-details/mattress-shampooing.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>222</div>
</div>
</a>
</div>
<div>
<a class="g-list" href="service-details/kitchen-deep-cleaning.html">
<div class="img-hover">
<img src="{{ asset('images/services/thumbnails/thumbnail.jpg') }}" alt="" class="img-responsive">
</div>
<div class="info-gallery">
<h3>Kitchen Deep Cleaning</h3>
<hr class="separator">
<p>Kitchen Deep Cleaning</p>
<div class="content-btn"><a href="service-details/kitchen-deep-cleaning.html"
class="btn btn-primary">Book Now</a></div>
<div class="price"><span>$</span><b>From</b>111</div>
</div>
</a>
</div>
</div>
</div>
</section>
</div>
Create a route for this home component:
Open web.php, create a new route, and comment out the welcome route:
<?php
use App\Http\Livewire\HomeComponent;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// Route::get('/', function () {
// return view('welcome');
// });
Route::get('/',HomeComponent::class)->name('home');
Copy the assets folder from the template directory, navigate to the project directory, then public, and paste the folder.
Run the application:
php artisan serve
Switch to the browser, navigate to http://localhost:8000, and you will see the home page of the project.
That's all about project and layout setup.
