Merge pull request '#1 update homepage for taman melawati' (#5) from 1-update-homepage into master

Reviewed-on: #5

.github/skills/tailwindcss-development/SKILL.md

@@ -10,7 +10,7 @@ metadata:
 
 ## Documentation
 
-Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
+Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
 
 ## Basic Usage
 
@@ -18,55 +18,22 @@ Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
 - Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
 - Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
 
-## Tailwind CSS v4 Specifics
+## Tailwind CSS v3 Specifics
 
-- Always use Tailwind CSS v4 and avoid deprecated utilities.
-- `corePlugins` is not supported in Tailwind v4.
+- Always use Tailwind CSS v3 and verify you're using only classes it supports.
+- Configuration is done in the `tailwind.config.js` file.
+- Import using `@tailwind` directives:
 
-### CSS-First Configuration
-
-In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:
-
-<!-- CSS-First Config -->
+<!-- v3 Import Syntax -->
 ```css
-@theme {
-  --color-brand: oklch(0.72 0.11 178);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 ```
 
-### Import Syntax
-
-In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:
-
-<!-- v4 Import Syntax -->
-```diff
-- @tailwind base;
-- @tailwind components;
-- @tailwind utilities;
-+ @import "tailwindcss";
-```
-
-### Replaced Utilities
-
-Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.
-
-| Deprecated | Replacement |
-|------------|-------------|
-| bg-opacity-* | bg-black/* |
-| text-opacity-* | text-black/* |
-| border-opacity-* | border-black/* |
-| divide-opacity-* | divide-black/* |
-| ring-opacity-* | ring-black/* |
-| placeholder-opacity-* | placeholder-black/* |
-| flex-shrink-* | shrink-* |
-| flex-grow-* | grow-* |
-| overflow-ellipsis | text-ellipsis |
-| decoration-slice | box-decoration-slice |
-| decoration-clone | box-decoration-clone |
-
 ## Spacing
 
-Use `gap` utilities instead of margins for spacing between siblings:
+When listing items, use gap utilities for spacing; don't use margins.
 
 <!-- Gap Utilities -->
 ```html
@@ -110,10 +77,15 @@ If existing pages and components support dark mode, new pages and components mus
 </div>
 ```
 
+## Verification
+
+1. Check browser for visual rendering
+2. Test responsive breakpoints
+3. Verify dark mode if project uses it
+
 ## Common Pitfalls
 
-- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)
-- Using `@tailwind` directives instead of `@import "tailwindcss"`
-- Trying to use `tailwind.config.js` instead of CSS `@theme` directive
 - Using margins for spacing between siblings instead of gap utilities
-- Forgetting to add dark mode variants when the project uses dark mode
+- Forgetting to add dark mode variants when the project uses dark mode
+- Not checking existing project conventions before adding new utilities
+- Overusing inline styles when Tailwind classes would suffice

AGENTS.md

@@ -19,7 +19,8 @@ This application is a Laravel application and its main Laravel ecosystems packag
 - laravel/pint (PINT) - v1
 - pestphp/pest (PEST) - v4
 - phpunit/phpunit (PHPUNIT) - v12
-- tailwindcss (TAILWINDCSS) - v4
+- alpinejs (ALPINEJS) - v3
+- tailwindcss (TAILWINDCSS) - v3
 
 ## Skills Activation
 
@@ -108,6 +109,20 @@ This project has domain-specific skills available in `**/skills/**`. You MUST ac
 
 - Laravel can be deployed using [Laravel Cloud](https://cloud.laravel.com/), which is the fastest way to deploy and scale production Laravel applications.
 
+=== herd rules ===
+
+# Laravel Herd
+
+- The application is served by Laravel Herd at `https?://[kebab-case-project-dir].test`. Use the `get-absolute-url` tool to generate valid URLs. Never run commands to serve the site. It is always available.
+- Use the `herd` CLI to manage services, PHP versions, and sites (e.g. `herd sites`, `herd services:start <service>`, `herd php:list`). Run `herd list` to discover all available commands.
+
+=== tests rules ===
+
+# Test Enforcement
+
+- Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass.
+- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter.
+
 === laravel/core rules ===
 
 # Do Things the Laravel Way

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "git-course",
+    "name": "git-iszuddin",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

public/mbip.txt

@@ -0,0 +1 @@
+test file

resources/views/components/application-logo.blade.php

@@ -1,3 +1,5 @@
-<svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
+<!-- <svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
     <path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"/>
-</svg>
+</svg> -->
+
+<img src="/images/kelasprogramming-logo-small.png" {{ $attributes }}>

resources/views/home.blade.php

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Neighborhood News Portal</title>
+
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+    </head>
+    <body class="min-h-screen bg-gradient-to-b from-emerald-50 via-white to-sky-50 text-slate-800 antialiased">
+        <div class="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+            @if (\Illuminate\Support\Facades\Route::has('login'))
+                <div class="mb-4 flex justify-end">
+                    <nav class="flex items-center gap-2 text-sm">
+                        @auth
+                            <a
+                                href="{{ url('/dashboard') }}"
+                                class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 font-medium text-emerald-800 transition hover:bg-emerald-100"
+                            >
+                                Dashboard
+                            </a>
+                        @else
+                            <a
+                                href="{{ route('login') }}"
+                                class="rounded-xl border border-slate-300 bg-white px-4 py-2 font-medium text-slate-700 transition hover:bg-slate-50"
+                            >
+                                Login
+                            </a>
+
+                            @if (\Illuminate\Support\Facades\Route::has('register'))
+                                <a
+                                    href="{{ route('register') }}"
+                                    class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 font-medium text-emerald-800 transition hover:bg-emerald-100"
+                                >
+                                    Register
+                                </a>
+                            @endif
+                        @endauth
+                    </nav>
+                </div>
+            @endif
+
+            <header class="relative overflow-hidden rounded-3xl border border-emerald-100 bg-white/80 p-6 shadow-sm backdrop-blur sm:p-8">
+                <img
+                    src="https://images.pexels.com/photos/10768840/pexels-photo-10768840.jpeg?auto=compress&cs=tinysrgb&w=1600"
+                    alt="Forested hills in the distance"
+                    class="absolute inset-0 h-full w-full object-cover"
+                >
+                <div class="absolute inset-0 bg-gradient-to-r from-white via-white/88 to-emerald-100/55"></div>
+                <div class="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-white/90 to-transparent"></div>
+                <div class="relative">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-emerald-700">Local Neighborhood Portal</p>
+                    <div class="mt-3 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                    <div>
+                        <h1 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Taman Melawati News</h1>
+                        <p class="mt-2 max-w-2xl text-sm text-slate-700 sm:text-base">
+                            Friendly updates from around the block. Stories are placeholders for now, but the spirit is real.
+                        </p>
+                        <p class="mt-4 text-xs uppercase tracking-[0.24em] text-slate-500">Inspired by the hills and forest edges around our neighborhood</p>
+                    </div>
+                    <div class="rounded-2xl border border-white/70 bg-white/75 px-4 py-3 text-sm text-emerald-950 shadow-sm backdrop-blur">
+                        <p class="font-semibold">Good morning, Neighbor</p>
+                        <p class="text-emerald-800">Tuesday community digest</p>
+                    </div>
+                </div>
+                </div>
+            </header>
+
+            <main class="mt-8 grid gap-6 lg:grid-cols-3">
+                <section class="space-y-6 lg:col-span-2">
+                    <article class="relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 shadow-sm sm:p-7">
+                        <img
+                            src="https://images.pexels.com/photos/9651398/pexels-photo-9651398.jpeg?auto=compress&cs=tinysrgb&w=1200"
+                            alt="Misty forested mountain backdrop"
+                            class="absolute inset-x-0 top-0 h-40 w-full object-cover"
+                        >
+                        <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-emerald-950/35 via-emerald-900/25 to-white"></div>
+                        <div class="relative pt-24">
+                        <p class="text-xs font-semibold uppercase tracking-wide text-amber-700">Top Story</p>
+                        <h2 class="mt-2 text-2xl font-semibold text-slate-900">Community Garden Harvest Day Set for Saturday</h2>
+                        <p class="mt-3 text-sm leading-6 text-slate-600">
+                            Volunteers from Cedar Lane and Oak Street are gathering at 8:00 AM to pick tomatoes, herbs, and okra.
+                            Bring a reusable bag and a smile. Extra produce will be shared with nearby families.
+                        </p>
+                        <div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-slate-500">
+                            <span class="rounded-full bg-emerald-50 px-3 py-1 font-medium text-emerald-700">By Hana, local editor</span>
+                            <span>2 hours ago</span>
+                        </div>
+                        </div>
+                    </article>
+
+                    <div class="grid gap-4 sm:grid-cols-2">
+                        <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                            <p class="text-xs font-semibold uppercase tracking-wide text-sky-700">Street Update</p>
+                            <h3 class="mt-2 text-lg font-semibold text-slate-900">Pine Street Lighting Repaired</h3>
+                            <p class="mt-2 text-sm text-slate-600">Evening walks are brighter again after three new lamps were installed this week.</p>
+                        </article>
+                        <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                            <p class="text-xs font-semibold uppercase tracking-wide text-rose-700">School Corner</p>
+                            <h3 class="mt-2 text-lg font-semibold text-slate-900">Book Drive Reaches 500 Donations</h3>
+                            <p class="mt-2 text-sm text-slate-600">Taman Melawati Elementary thanks neighbors for donating books to the weekend reading club.</p>
+                        </article>
+                    </div>
+                </section>
+
+                <aside class="space-y-6">
+                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                        <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-700">Community Board</h3>
+                        <ul class="mt-4 space-y-3 text-sm text-slate-600">
+                            <li class="rounded-xl bg-slate-50 px-3 py-2">Thursday 7 PM: Town Hall mini-meet at River Cafe.</li>
+                            <li class="rounded-xl bg-slate-50 px-3 py-2">Friday 5 PM: Youth futsal practice at West Court.</li>
+                            <li class="rounded-xl bg-slate-50 px-3 py-2">Sunday 9 AM: Riverside clean-up, all ages welcome.</li>
+                        </ul>
+                    </section>
+
+                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                        <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-700">Weather Snapshot</h3>
+                        <p class="mt-3 text-3xl font-bold text-slate-900">29°C</p>
+                        <p class="text-sm text-slate-600">Warm with light breeze. Great evening for a neighborhood stroll.</p>
+                    </section>
+                </aside>
+            </main>
+        </div>
+    </body>
+</html>

resources/views/welcome.blade.php

@@ -48,7 +48,8 @@
             @endif
         </header>
 
-            <h1 class="text-5xl text-center">GIT COURSE</h1>
+            <h1 class="text-5xl text-center">COMPANY SYSTEM</h1>
+            <h2>Mempelajari Git & Gitea</h2>
 
         <div class="flex items-center justify-center w-full transition-opacity opacity-100 duration-750 lg:grow starting:opacity-0">
             <main class="flex max-w-[335px] w-full flex-col-reverse lg:max-w-4xl lg:flex-row">

routes/web.php

@@ -1,12 +1,12 @@
 <?php
 
 use App\Http\Controllers\ProfileController;
-use App\Http\Controllers\UserController;
 use App\Http\Controllers\RoleController;
+use App\Http\Controllers\UserController;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
-    return view('welcome');
+    return view('home');
 });
 
 Route::get('/dashboard', function () {

tests/Feature/ExampleTest.php

@@ -3,5 +3,10 @@
 it('returns a successful response', function () {
     $response = $this->get('/');
 
-    $response->assertStatus(200);
+    $response
+        ->assertSuccessful()
+        ->assertSee('Taman Melawati News')
+        ->assertSee('Community Garden Harvest Day Set for Saturday')
+        ->assertSee('Login')
+        ->assertSee('Register');
 });