From 161906731a31c7b9e408157bf5ff59943a20d753 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Mon, 5 Jan 2026 15:24:58 +0700
Subject: [PATCH] feat: add 'About Us' page with Livewire component and update
 navigation links in header and footer.

---
 app/Livewire/Home/AboutUs.php                 | 20 ++++++
 .../components/partials/footer.blade.php      |  6 +-
 .../components/partials/header.blade.php      |  9 +--
 .../views/livewire/home/about-us.blade.php    | 66 +++++++++++++++++++
 routes/web.php                                |  2 +
 5 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 app/Livewire/Home/AboutUs.php
 create mode 100644 resources/views/livewire/home/about-us.blade.php

diff --git a/app/Livewire/Home/AboutUs.php b/app/Livewire/Home/AboutUs.php
new file mode 100644
index 0000000..1e1efa5
--- /dev/null
+++ b/app/Livewire/Home/AboutUs.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Livewire\Home;
+
+use App\Settings\GeneralSettings;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Title('Tentang Kami')]
+class AboutUs extends Component
+{
+    public function render(GeneralSettings $settings)
+    {
+        return view('livewire.home.about-us', [
+            'pageTitle' => 'Tentang Kami',
+            'pageDescription' => 'Kenali kami lebih dekat.',
+            'settings' => $settings,
+        ]);
+    }
+}
diff --git a/resources/views/components/partials/footer.blade.php b/resources/views/components/partials/footer.blade.php
index 7e842c3..2c070df 100644
--- a/resources/views/components/partials/footer.blade.php
+++ b/resources/views/components/partials/footer.blade.php
@@ -66,16 +66,16 @@ class="col-12 col-xl-4 col-lg-4 col-sm-6 last-paragraph-no-margin text-xl-start
                         <a href="{{ route('home') }}">Beranda</a>
                     </li>
                     <li>
-                        <a href="#">Berita</a>
+                        <a wire:navigate href="{{ route('news.index') }}">Berita</a>
                     </li>
                     <li>
                         <a href="#">Pengumuman</a>
                     </li>
                     <li>
-                        <a href="#">Tentang Kami</a>
+                        <a wire:navigate href="{{ route('about-us') }}">Tentang Kami</a>
                     </li>
                     <li>
-                        <a href="#">Kontak</a>
+                        <a href="{{ route('home') }}#contact">Kontak</a>
                     </li>
                 </ul>
             </div>
diff --git a/resources/views/components/partials/header.blade.php b/resources/views/components/partials/header.blade.php
index c791c53..b9e685e 100644
--- a/resources/views/components/partials/header.blade.php
+++ b/resources/views/components/partials/header.blade.php
@@ -38,16 +38,17 @@ class="mobile-logo">
                             <a href="{{ route('home') }}"
                                 class="nav-link {{ Route::is('home') ? 'active' : '' }}">Beranda</a>
                         </li>
+                        <li class="nav-item">
+                            <a wire:navigate href="{{ route('about-us') }}"
+                                class="nav-link {{ Route::is('about-us') ? 'active' : '' }}">Tentang Kami</a>
+                        </li>
                         <li class="nav-item">
                             <a wire:navigate href="{{ route('news.index') }}"
                                 class="nav-link {{ Route::is('news.index') || Route::is('news.show') ? 'active' : '' }}">Berita</a>
                         </li>
                         <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-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 class="nav-item"><a href="{{ route('home') }}#contact" class="nav-link">Kontak</a>
                         </li>
                     </ul>
                 </div>
diff --git a/resources/views/livewire/home/about-us.blade.php b/resources/views/livewire/home/about-us.blade.php
new file mode 100644
index 0000000..1657c80
--- /dev/null
+++ b/resources/views/livewire/home/about-us.blade.php
@@ -0,0 +1,66 @@
+<div>
+    <section class="pt-0 cover-background ipad-top-space-margin sm-pb-0"
+        style="background-image:
+      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
+      url('https://i0.wp.com/infoka.id/wp-content/uploads/2024/04/Diskominfo-Purwakarta.jpg?resize=1000%2C600&ssl=1');">
+        <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">
+                <path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
+                    <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;
+                            M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
+                        repeatCount="indefinite" />
+                </path>
+            </svg>
+        </div>
+        <div class="container">
+            <div class="row align-items-center justify-content-center h-500px sm-h-300px">
+                <div class="col-12 col-lg-6 col-md-10 position-relative text-center page-title-extra-large d-flex flex-wrap flex-column align-items-center justify-content-center"
+                    data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
+                    <span
+                        class="ps-25px pe-25px pt-5px pb-5px mb-15px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex"><i
+                            class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span>
+                    <h5 class="mb-20px text-white fw-600 ls-minus-1px">{{ $pageDescription }}</h5>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- start section -->
+    <section>
+        <div class="container">
+            <div class="row align-items-center justify-content-center">
+                <div class="col-lg-6 col-md-10 md-mb-50px"
+                    data-anime='{ "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
+                    <div class="position-relative ps-13 pe-13 ps-sm-0 pe-sm-0">
+                        <img src="https://i0.wp.com/infoka.id/wp-content/uploads/2024/04/Diskominfo-Purwakarta.jpg?resize=1000%2C600&ssl=1"
+                            alt="Diskominfo Purwakarta" class="border-radius-6px w-100 shadow-lg">
+                        <div class="position-absolute bottom-minus-30px right-50px lg-right-20px w-50 sm-w-60 xs-w-70 shadow-xl"
+                            data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 300, "staggervalue": 300, "easing": "easeOutQuad" }'>
+                            @if ($settings->site_logo)
+                                <img src="{{ asset('storage/' . $settings->site_logo) }}"
+                                    class="border-radius-10px bg-white p-10px w-100" alt="Logo Simedkom">
+                            @else
+                                <img src="{{ asset('assets/img/logo/icon-with-text.png') }}"
+                                    class="border-radius-10px bg-white p-10px w-100 shadow-lg" alt="Logo Simedkom">
+                            @endif
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-5 col-lg-6 offset-xl-1">
+                    <span
+                        class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-gradient-very-light-gray-transparent d-inline-flex align-items-center">
+                        <i class="bi bi-info-circle fs-16 me-10px text-base-color"></i>
+                        Tentang Kami
+                    </span>
+                    <h3 class="text-dark-gray fs-50 fw-700 ls-minus-2px mb-25px">Simedkom</h3>
+                    <div class="mb-40px sm-mb-25px text-dark-gray fs-18 lh-32" style="text-align: justify;">
+                        <p>{!! $settings->about_us !!}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- end section -->
+</div>
diff --git a/routes/web.php b/routes/web.php
index dc8089d..3c47b5d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,11 +1,13 @@
 <?php
 
+use App\Livewire\Home\AboutUs;
 use App\Livewire\Home\Index;
 use App\Livewire\Home\News\Index as NewsIndex;
 use App\Livewire\Home\News\Show as NewsShow;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', Index::class)->name('home');
+Route::get('/about-us', AboutUs::class)->name('about-us');
 
 Route::prefix('news')->group(function () {
     Route::get('/', NewsIndex::class)->name('news.index');