In this video we are going to Learn about Creating Laravel 8 new Project and Layout Setup For the Home Services Project
So first of all lets create the new Laravel 8 project
So switch to command prompt and here type the command for creating new project
Alright project created
Now go inside the project directory
So write here
Now lets install the livewire
Alright livewire has been installed
Now lets open the project inside the visual studio code
So open visual studio code and
Click on open folder
Now select the project directory and click on open
Now lets configure the database
So lets open the phpMyAdmin and here click on databases
Now enter the new database name here
homeservicesdb
Now switch to the project and open .env file
And here lets add the database name, user name and password
Now run the project so switch to the command prompt
And type the command
Now open the browser
And go to the url localhost:8000
And here is laravel 8 project default welcome page Now lets get the html template for this HomeServices Project
So go to the google and
Here just search Surfside Media Github
Now click on first link and here you can see the
Laravel 8 Project Home Services Repository
Now click on this repository
From here you can download this template .zip file
Alright
After extracting the template.zip file
You will get these files
Alright Now lets use this html template in our project
So first of all lets create a layout page in our project
So switch to project and just go inside the resources directory
Then views
And inside the views directory lets create a new folder
Layouts
Inside the layouts directory lets create a new file
Lets say file name is base.blade.php
This is layout file
Now go the html template directory and open index.html in any text editor
Now select all and copy the all text
And just paste inside the base.blade.php file
Alright Now make change in this base.blade.php file
Here Slot is used for render the livewire component
Add @livewireStyles for livewire css and before closing the body tag add here @livewireScripts,for livewire scripts
Now lets create a livewire component for home page
So switch to the command prompt and for creating livewire component just type the command
Now switch to the project and just open the home component class file and here inside the render method
Just add the layout here
Now lets open the home component view file and from index.html template file just copy the main part text
And past inside the home component
Now modify the all image url and add the asset, asset is used for point the public directory
Now lets create the route for this home component
So just open the web.php
And here create new route and comment this welcome route
All right now from template directory just copy this assets folder
And now go to the project directory and then public
And inside the public directory just paste here
Now all set so lets check this
So first of all run the application
Php artisan serve
Now switch to the browser and go to the url
http://Localhost:8000
And here you can see the home page or project
So in this way you can create layout and implement the html template so that's all about Project & Layout Setup
So first of all lets create the new Laravel 8 project
So switch to command prompt and here type the command for creating new project
composer create-project laravel/laravel HomeServices
Alright project created
Now go inside the project directory
So write here
cd HomeServices
Now lets install the livewire
composer require livewire/livewire
Alright livewire has been installed
Now lets open the project inside the visual studio code
So open visual studio code and
Click on open folder
Now select the project directory and click on open
Now lets configure the database
So lets open the phpMyAdmin and here click on databases
Now enter the new database name here
homeservicesdb
Now switch to the project and open .env file
And here lets add the database name, user name and password
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homeservicesdb
DB_USERNAME=root
DB_PASSWORD=
Now run the project so switch to the command prompt
And type the command
Php artisan serve
Now open the browser
And go to the url localhost:8000
And here is laravel 8 project default welcome page Now lets get the html template for this HomeServices Project
So go to the google and
Here just search Surfside Media Github
Now click on first link and here you can see the
Laravel 8 Project Home Services Repository
Now click on this repository
From here you can download this template .zip file
Alright
After extracting the template.zip file
You will get these files
Alright Now lets use this html template in our project
So first of all lets create a layout page in our project
So switch to project and just go inside the resources directory
Then views
And inside the views directory lets create a new folder
Layouts
Inside the layouts directory lets create a new file
Lets say file name is base.blade.php
This is layout file
Now go the html template directory and open index.html in any text editor
Now select all and copy the all text
And just paste inside the base.blade.php file
Alright Now make change in this 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 Slot is used for render the livewire component
Add @livewireStyles for livewire css and before closing the body tag add here @livewireScripts,for livewire scripts
Now lets create a livewire component for home page
So switch to the command prompt and for creating livewire component just type the command
Php aritisan make:livewire Home
Now switch to the project and just open the home component class file and here inside the render method
Just add the layout here
<?php
namespace App\\Http\\Livewire;
use Livewire\\Component;
class HomeComponent extends Component
{
public function render()
{
return view('livewire.home-component')->layout('layouts.base');
}
}
Now lets open the home component view file and from index.html template file just copy the main part text
And past inside the home component
Now modify the all image url and add the asset, asset is used for point 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>
Now lets create the route for this home component
So just open the web.php
And here create new route and comment this 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');
All right now from template directory just copy this assets folder
And now go to the project directory and then public
And inside the public directory just paste here
Now all set so lets check this
So first of all run the application
Php artisan serve
Now switch to the browser and go to the url
http://Localhost:8000
And here you can see the home page or project
So in this way you can create layout and implement the html template so that's all about Project & Layout Setup
