refactor: Remove PHP view components and Sass/Bootstrap dependencies, introduce ViewServiceProvider, and update UI content.

This commit is contained in:
Yoga Pangestu 2026-01-05 13:34:38 +07:00
parent 0ffc7a1d92
commit 5b4efc8a5d
13 changed files with 161 additions and 225 deletions

View File

@ -0,0 +1,29 @@
<?php
namespace App\Providers;
use App\Settings\GeneralSettings;
use App\Settings\SeoSettings;
use App\Settings\SocialMediaSettings;
use Illuminate\Support\ServiceProvider;
class ViewServiceProvider extends ServiceProvider
{
/**
* Register services.
*/
public function register(): void
{
//
}
/**
* Bootstrap services.
*/
public function boot(): void
{
view()->share('general', app(GeneralSettings::class));
view()->share('social', app(SocialMediaSettings::class));
view()->share('seo', app(SeoSettings::class));
}
}

View File

@ -1,26 +0,0 @@
<?php
namespace App\View\Components\Partials;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class Footer extends Component
{
/**
* Create a new component instance.
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.partials.footer');
}
}

View File

@ -1,26 +0,0 @@
<?php
namespace App\View\Components\Partials;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class Header extends Component
{
/**
* Create a new component instance.
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.partials.header');
}
}

View File

@ -3,4 +3,5 @@
return [
App\Providers\AppServiceProvider::class,
App\Providers\Filament\DashboardPanelProvider::class,
App\Providers\ViewServiceProvider::class,
];

33
package-lock.json generated
View File

@ -5,9 +5,7 @@
"packages": {
"": {
"dependencies": {
"@lottiefiles/dotlottie-react": "^0.17.10",
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.8"
"@lottiefiles/dotlottie-react": "^0.17.10"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.18",
@ -853,16 +851,6 @@
"node": ">=0.10"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.54.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
@ -1495,25 +1483,6 @@
"proxy-from-env": "^1.1.0"
}
},
"node_modules/bootstrap": {
"version": "5.3.8",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
"integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"license": "MIT",
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/braces": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",

View File

@ -16,8 +16,6 @@
"vite": "^7.0.7"
},
"dependencies": {
"@lottiefiles/dotlottie-react": "^0.17.10",
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.8"
"@lottiefiles/dotlottie-react": "^0.17.10"
}
}

View File

@ -1,7 +1 @@
import './bootstrap';
// Import our custom CSS
import '../sass/app.scss'
// Import all of Bootstraps JS
import * as bootstrap from 'bootstrap'

View File

@ -1,2 +0,0 @@
// Import all of Bootstraps CSS
@import "bootstrap/scss/bootstrap";

View File

@ -23,7 +23,7 @@
<link rel="stylesheet" href="{{ asset('css/home/responsive.css') }}" />
<link rel="stylesheet" href="{{ asset('css/home/it-business.css') }}" />
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@vite(['resources/js/app.js'])
</head>
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#252840">

View File

@ -1,87 +1,101 @@
<footer class="p-0 footer-light position-relative">
<div class="container position-relative">
<div class="row justify-content-center pt-5 sm-pt-40px">
<!-- start footer column -->
<div
class="col-6 col-xl-3 col-lg-12 col-sm-6 last-paragraph-no-margin text-xl-start text-lg-center order-sm-1 lg-mb-50px sm-mb-30px">
<a href="demo-it-business.html" class="footer-logo mb-15px d-inline-block">
<img src="images/demo-it-business-logo-black.png"
data-at2x="images/demo-it-business-logo-black@2x.png" alt="">
class="col-12 col-xl-4 col-lg-4 col-sm-6 last-paragraph-no-margin text-xl-start text-lg-center lg-mb-50px sm-mb-30px">
<a href="{{ url('/') }}" class="footer-logo mb-15px d-inline-block">
@if ($general->site_logo)
<img src="{{ asset('storage/' . $general->site_logo) }}"
data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}">
@else
<img src="{{ asset('assets/img/logo/icon-with-text.png') }}"
data-at2x="{{ asset('assets/img/logo/icon-with-text.png') }}"
alt="{{ $general->site_name }}">
@endif
</a>
<p class="lh-28 w-90 xl-w-100 mx-lg-auto mx-xl-0">Gearing your company through an innovative
strategy.</p>
<div class="elements-social social-icon-style-02 mt-15px">
<div class="fw-700 text-dark-gray text-uppercase ls-minus-1px fs-18 lh-24">
Dinas Komunikasi dan Informatika<br>Kabupaten Purwakarta
</div>
</div>
<!-- Kiri: Alamat dan Social Media -->
<div class="col-6 col-xl-3 col-lg-4 col-sm-6 xs-mb-30px">
<span class="fw-600 d-block text-dark-gray mb-10px">Kontak & Alamat</span>
@if ($general->address)
<p class="lh-22 mb-15px">{{ $general->address }}</p>
@endif
<div class="elements-social social-icon-style-02">
<ul class="medium-icon dark">
<li class="my-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i
class="fa-brands fa-facebook-f"></i></a></li>
<li class="my-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i
class="fa-brands fa-dribbble"></i></a></li>
<li class="my-0"><a class="twitter" href="http://www.twitter.com" target="_blank"><i
class="fa-brands fa-twitter"></i></a></li>
<li class="my-0"><a class="instagram" href="http://www.instagram.com" target="_blank"><i
class="fa-brands fa-instagram"></i></a></li>
@if ($social->facebook)
<li class="my-0">
<a class="facebook " href="{{ $social->facebook }}" target="_blank">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
@endif
@if ($social->twitter)
<li class="my-0">
<a class="twitter " href="{{ $social->twitter }}" target="_blank">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
@endif
@if ($social->instagram)
<li class="my-0">
<a class="instagram " href="{{ $social->instagram }}" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
@endif
@if ($social->youtube)
<li class="my-0">
<a class="youtube " href="{{ $social->youtube }}" target="_blank">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
@endif
</ul>
</div>
</div>
<!-- end footer column -->
<!-- start footer column -->
<div class="col-6 col-xl-2 col-lg-3 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fw-600 d-block text-dark-gray mb-5px">Company</span>
<!-- Samping Kanan: Tautan -->
<div class="col-6 col-xl-2 col-lg-2 col-sm-4 xs-mb-30px">
<span class="fw-600 d-block text-dark-gray mb-10px">Tautan</span>
<ul>
<li><a href="demo-it-business-about.html">Who we are</a></li>
<li><a href="demo-it-business-services.html">Our services</a>
<div
class="bg-dark-gray fw-600 text-white lh-22 text-uppercase border-radius-30px ps-10px pe-10px fs-10 ms-10px d-inline-block align-middle">
Hot</div>
<li>
<a href="{{ route('home') }}">Beranda</a>
</li>
<li>
<a href="#">Berita</a>
</li>
<li>
<a href="#">Pengumuman</a>
</li>
<li>
<a href="#">Tentang Kami</a>
</li>
<li>
<a href="#">Kontak</a>
</li>
<li><a href="demo-it-business-case-studies.html">Our clients</a></li>
<li><a href="demo-it-business-contact.html">Contact us</a></li>
</ul>
</div>
<!-- end footer column -->
<!-- start footer column -->
<div class="col-6 col-xl-2 col-lg-3 col-md-5 col-sm-4 xs-mb-30px order-sm-4 order-lg-3">
<span class="fw-600 d-block text-dark-gray mb-5px">Services</span>
<ul>
<li><a href="#">Planning</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">Consulting</a></li>
<li><a href="#">Analysis</a></li>
<!-- Samping Kanan (Paling Kanan): Statistik Pengunjung -->
<div class="col-6 col-xl-3 col-lg-2 col-sm-4 xs-mb-30px">
<span class="fw-600 d-block text-dark-gray mb-10px">Statistik Pengunjung</span>
<ul class="list-style-01">
<li class="border-color-extra-medium-gray pt-5px pb-5px">Hari ini: <span
class="fw-600 text-dark-gray float-end">123</span></li>
<li class="border-color-extra-medium-gray pt-5px pb-5px">Kemarin: <span
class="fw-600 text-dark-gray float-end">456</span></li>
<li class="border-color-extra-medium-gray pt-5px pb-5px">Bulan ini: <span
class="fw-600 text-dark-gray float-end">7,890</span></li>
<li class="border-color-extra-medium-gray pt-5px pb-5px">Total: <span
class="fw-600 text-dark-gray float-end">12,345</span></li>
</ul>
</div>
<!-- end footer column -->
<!-- start footer column -->
<div class="col-6 col-xl-2 col-lg-3 col-md-3 col-sm-4 xs-mb-30px order-sm-5 order-lg-4">
<span class="fw-600 d-block text-dark-gray mb-5px">Need help?</span>
<span>Call us directly?</span>
<span class="d-block mb-10px"><a class="text-dark-gray fw-600" href="tel:1235678901">(123)
567 8901</a></span>
<span>Need support?</span>
<a href="mailto:help@domain.com" class="text-dark-gray fw-600">help@domain.com</a>
</div>
<!-- end footer column -->
<!-- start footer column -->
<div class="col-xl-3 col-lg-3 col-sm-6 md-mb-50px sm-mb-30px xs-mb-0 order-sm-2 order-lg-5">
<span class="fw-600 d-block text-dark-gray mb-5px">Subscribe newsletter</span>
<p class="lh-28 w-95 mb-10px xs-mb-10px">Subscribe our newsletter to get the latest news and
updates!</p>
<div class="d-inline-block w-100 newsletter-style-04 position-relative">
<form action="email-templates/subscribe-newsletter.php" method="post"
class="position-relative w-100">
<input
class="fs-15 bg-white w-100 border-0 border-bottom border-1 border-color-dark-gray form-control required"
type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value="">
<button class="btn submit" aria-label="submit"><i
class="icon feather icon-feather-mail icon-small"></i></button>
<div
class="form-results border-radius-0px p-15px fs-16 lh-24 w-100 text-center position-absolute d-none">
</div>
</form>
</div>
</div>
<!-- end footer column -->
</div>
<div class="row justify-content-center align-items-center pt-7">
<!-- start divider -->
<div class="col-12">
@ -91,8 +105,7 @@ class="form-results border-radius-0px p-15px fs-16 lh-24 w-100 text-center posit
<!-- start copyright -->
<div
class="col-lg-5 pt-20px pb-20px md-pt-0 order-2 order-lg-1 text-center text-lg-start last-paragraph-no-margin fs-14">
<p>&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank"
class="text-dark-gray fw-600 text-decoration-line-bottom">ThemeZaa</a>
<p>&copy; {{ date('Y') }} {{ $general->site_name }}. Seluruh Hak Cipta Dilindungi.
</p>
</div>
<!-- end copyright -->

View File

@ -4,13 +4,24 @@
data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-xxl-3 col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="demo-it-business.html">
<img src="images/demo-it-business-logo-white.png"
data-at2x="images/demo-it-business-logo-white@2x.png" alt="" class="default-logo">
<img src="images/demo-it-business-logo-black.png"
data-at2x="images/demo-it-business-logo-black@2x.png" alt="" class="alt-logo">
<img src="images/demo-it-business-logo-black.png"
data-at2x="images/demo-it-business-logo-black@2x.png" alt="" class="mobile-logo">
<a class="navbar-brand" href="{{ url('/') }}">
@if ($general->site_logo)
<img src="{{ asset('storage/' . $general->site_logo) }}"
data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}"
class="default-logo">
<img src="{{ asset('storage/' . $general->site_logo) }}"
data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}"
class="alt-logo">
<img src="{{ asset('storage/' . $general->site_logo) }}"
data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}"
class="mobile-logo">
@else
<img src="{{ asset('assets/img/logo/icon-with-text.png') }}" alt="logo"
class="default-logo">
<img src="{{ asset('assets/img/logo/icon-with-text.png') }}" alt="logo" class="alt-logo">
<img src="{{ asset('assets/img/logo/icon-with-text.png') }}" alt="logo"
class="mobile-logo">
@endif
</a>
</div>
<div class="col-auto col-xxl-6 col-lg-8 menu-order position-static">
@ -23,33 +34,18 @@
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="demo-it-business.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-it-business-about.html" class="nav-link">About</a>
<li class="nav-item">
<a href="{{ route('home') }}"
class="nav-link {{ Route::is('home') ? 'active' : '' }}">Beranda</a>
</li>
<li class="nav-item dropdown dropdown-with-icon-style02">
<a href="demo-it-business-services.html" class="nav-link">Services</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="demo-it-business-services-details.html"><i class="bi bi-briefcase"></i>Data
analytics</a></li>
<li><a href="demo-it-business-services-details.html"><i
class="bi bi-clipboard-data"></i>Finance consulting</a></li>
<li><a href="demo-it-business-services-details.html"><i
class="bi bi-peace"></i>Technology innovation</a></li>
<li><a href="demo-it-business-services-details.html"><i
class="bi bi-bar-chart-line"></i>Digital commerce</a></li>
<li><a href="demo-it-business-services-details.html"><i
class="bi bi-send-check"></i>Artificial intelligence</a></li>
<li><a href="demo-it-business-services-details.html"><i class="bi bi-globe2"></i>Cloud
computing</a></li>
</ul>
<li class="nav-item"><a href="demo-it-business-about.html" class="nav-link">Berita</a>
</li>
<li class="nav-item"><a href="demo-it-business-case-studies.html" class="nav-link">Case
studies</a></li>
<li class="nav-item"><a href="demo-it-business-blog.html" class="nav-link">Blog</a>
<li class="nav-item"><a href="demo-it-business-about.html" class="nav-link">Pengumuman</a>
</li>
<li class="nav-item"><a href="demo-it-business-contact.html" class="nav-link">Contact</a>
<li class="nav-item"><a href="demo-it-business-case-studies.html" class="nav-link">Tentang
Kami</a>
</li>
<li class="nav-item"><a href="demo-it-business-contact.html" class="nav-link">Kontak</a>
</li>
</ul>
</div>
@ -57,8 +53,8 @@ class="bi bi-send-check"></i>Artificial intelligence</a></li>
<div class="col-auto col-xxl-3 col-lg-2 text-end d-none d-sm-flex">
<div class="header-icon">
<div class="header-button"><a href="demo-it-business-contact.html"
class="btn btn-large btn-transparent-white-light btn-rounded text-transform-none border-1">Start
a project<i class="fa-solid fa-arrow-right"></i></a></div>
class="btn btn-large btn-transparent-white-light btn-rounded text-transform-none border-1">Masuk</a>
</div>
</div>
</div>
</div>

View File

@ -2,7 +2,11 @@
<x-partials.header />
<!-- start hero section -->
<section class="cover-background full-screen ipad-top-space-margin py-0 md-h-750px sm-h-650px"
style="background-image:url('{{ asset('assets/img/bg/default.jpg') }}');">
style="
background-image:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url('https://images.pexels.com/photos/669619/pexels-photo-669619.jpeg');
">
<div class="opacity-very-light bg-black"></div>
<div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
@ -21,27 +25,13 @@
data-anime='{ "el": "childs", "translateY": [0, 0], "perspective": [1200,1200], "scale": [1.05, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
<span
class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex w-70 sm-w-100"><i
class="bi bi-megaphone text-white icon-small me-10px"></i>Grow your business with
us</span>
<h1 class="text-white fw-600 ls-minus-2px mb-25px">We craft unique business ideas.</h1>
class="bi bi-megaphone text-white icon-small me-10px"></i>Simedkom</span>
<h1 class="text-white fw-600 ls-minus-2px mb-25px">Sistem Media Komunikasi</h1>
<div>
<p class="fw-300 fs-18 w-85 sm-w-95 text-white opacity-6">We're a fully dedicated corporate
service agency collaborating with brands all over the world.</p>
<p class="fw-300 fs-18 w-85 sm-w-95 text-white opacity-6">Merupakan sebuah aplikasi berbasis
digital untuk mempermudah bidang informasi dan komunikasi publik di Diskominfo Purwakarta
dalam menjalankan monitoring media di Kabupaten Purwakarta.</p>
</div>
<a href="index.html" target="blank"
class="btn btn-extra-large btn-switch-text btn-gradient-purple-pink btn-rounded me-10px ls-0px mt-15px">
<span>
<span class="btn-double-text" data-text="Explore crafto">Explore crafto</span>
<span><i class="fa-brands fa-youtube"></i></span>
</span>
</a>
<a href="demo-it-business-contact.html"
class="btn btn-extra-large btn-switch-text btn-transparent-white-light btn-rounded border-1 ls-0px mt-15px">
<span>
<span class="btn-double-text" data-text="Contact us">Contact us</span>
<span><i class="fa-regular fa-envelope"></i></span>
</span>
</a>
</div>
</div>
</div>
@ -1027,7 +1017,7 @@ class="border-top fs-16 border-1 border-color-extra-medium-gray p-15px last-para
<span
class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-inline-flex align-items-center text-start sm-lh-20"><i
class="bi bi-megaphone text-white d-inline-block align-middle icon-small me-10px"></i>
Let's make something great work together.</span>
Ayo menjadi bagian dari kami.</span>
<h1 class="text-white fw-600 ls-minus-2px mb-50px">We make the creative solutions for business!
</h1>
<a href="#"
@ -1041,10 +1031,11 @@ class="btn btn-extra-large btn-switch-text btn-gradient-purple-pink btn-rounded
</div>
</div>
</div>
<div class="shape-image-animation p-0 w-100 bottom-minus-40px xl-bottom-0px d-none d-md-block">
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200"
fill="#ffffff">
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
<div class="shape-image-animation p-0 w-100 bottom-minus-40px xl-bottom-0px d-none d-md-block"
style="height: 150px; overflow: hidden; z-index: 1;">
<svg xmlns="http://www.w3.org/2000/svg" width="3000" height="400" viewBox="0 180 2500 200">
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
fill="#ffffff">
<animate attributeName="d" dur="5s"
values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;

View File

@ -6,7 +6,6 @@ export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
'resources/css/filament/dashboard/theme.css'
],