Skip to content

Showcase more of modern PHP on the landing page #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikamodis wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Showcase more of modern PHP on the landing page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3166a3a
feat: add modern PHP features section to landing page
Jul 23, 2026
b0ff5c3
feat: add enums and traits tabs to hero code sample
Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 141 additions & 0 deletions resources/views/welcome.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1217,11 +1217,55 @@
height: 18px;
}
}

.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 2rem 0;
}

.feature-card {
border: 1px solid #27272a;
border-radius: 12px;
padding: 1.5rem;
background: rgba(24, 24, 27, 0.4);
transition: border-color 0.25s ease, transform 0.25s ease;
}

.feature-card:hover {
border-color: #3f3f46;
transform: translateY(-3px);
}

.feature-card h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}

.feature-card p {
font-size: 0.95rem;
color: #a1a1aa;
margin-bottom: 1rem;
}

.feature-card pre {
margin: 0;
font-size: 0.8rem;
}

@media (max-width: 640px) {
.feature-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<main class="container">
<nav class="nav" aria-label="Main navigation">
<a href="#features">Features</a>
<span class="nav-sep" aria-hidden="true">·</span>
<a href="#ecosystem">Ecosystem</a>
<span class="nav-sep" aria-hidden="true">·</span>
<a href="#watch-this">Watch this</a>
Expand All @@ -1245,6 +1289,8 @@
<button class="os-tab" data-hero="api">API</button>
<button class="os-tab" data-hero="testing">Testing</button>
<button class="os-tab" data-hero="generics">Generics</button>
<button class="os-tab" data-hero="enums">Enums</button>
<button class="os-tab" data-hero="traits">Traits</button>
</div>

<div class="hero-code-container">
Expand Down Expand Up @@ -1279,6 +1325,37 @@
-><span style="color:#61afef;">filter</span>(<span style="color:#c678dd;">fn</span> (<span style="color:#e5c07b;">Book</span> <span style="color:#e06c75;">$book</span>): <span style="color:#e5c07b;">bool</span> => <span style="color:#e06c75;">$book</span>-><span style="color:#61afef;">isPublished</span>())
-><span style="color:#61afef;">map</span>(<span style="color:#c678dd;">fn</span> (<span style="color:#e5c07b;">Book</span> <span style="color:#e06c75;">$book</span>): <span style="color:#e5c07b;">string</span> => <span style="color:#e06c75;">$book</span>-><span style="color:#e06c75;">title</span>)
-><span style="color:#61afef;">toArray</span>();
}</code></pre>
</div>

<div class="hero-code hidden" id="hero-enums">
<pre><code><span style="color:#c678dd;">enum</span> <span style="color:#e5c07b;">Status</span>: <span style="color:#e5c07b;">string</span>
{
<span style="color:#c678dd;">case</span> <span style="color:#e06c75;">Draft</span> = <span style="color:#98c379;">'draft'</span>;
<span style="color:#c678dd;">case</span> <span style="color:#e06c75;">Published</span> = <span style="color:#98c379;">'published'</span>;

<span style="color:#c678dd;">public function</span> <span style="color:#61afef;">label</span>(): <span style="color:#e5c07b;">string</span>
{
<span style="color:#c678dd;">return</span> <span style="color:#c678dd;">match</span> (<span style="color:#e06c75;">$this</span>) {
<span style="color:#e5c07b;">Status</span>::<span style="color:#e06c75;">Draft</span> => <span style="color:#98c379;">'Working on it'</span>,
<span style="color:#e5c07b;">Status</span>::<span style="color:#e06c75;">Published</span> => <span style="color:#98c379;">'Ready to read'</span>,
};
}
}</code></pre>
</div>

<div class="hero-code hidden" id="hero-traits">
<pre><code><span style="color:#c678dd;">trait</span> <span style="color:#e5c07b;">HasTimestamps</span>
{
<span style="color:#c678dd;">public function</span> <span style="color:#61afef;">wasRecentlyCreated</span>(): <span style="color:#e5c07b;">bool</span>
{
<span style="color:#c678dd;">return</span> <span style="color:#e06c75;">$this</span>-><span style="color:#e06c75;">createdAt</span>-><span style="color:#61afef;">isToday</span>();
}
}

<span style="color:#c678dd;">final class</span> <span style="color:#e5c07b;">Book</span>
{
<span style="color:#c678dd;">use</span> <span style="color:#e5c07b;">HasTimestamps</span>;
}</code></pre>
</div>
</div>
Expand All @@ -1302,6 +1379,70 @@

<hr>

<section id="features" class="reveal">
<h2>The features that make PHP shine</h2>

<p>Not one trick. A whole toolkit for code that's type-safe, expressive, and a joy to maintain.</p>

<div class="feature-grid">
<div class="feature-card">
<h3>Enums</h3>
<p>Type-safe constants that carry values and behavior.</p>
<pre><code><span style="color:#c678dd;">enum</span> <span style="color:#e5c07b;">Status</span>: <span style="color:#e5c07b;">string</span>
{
<span style="color:#c678dd;">case</span> <span style="color:#e06c75;">Published</span> = <span style="color:#98c379;">'published'</span>;
}</code></pre>
</div>
<div class="feature-card">
<h3>Traits</h3>
<p>Compose reusable behavior across unrelated classes.</p>
<pre><code><span style="color:#c678dd;">final class</span> <span style="color:#e5c07b;">Book</span>
{
<span style="color:#c678dd;">use</span> <span style="color:#e5c07b;">HasTimestamps</span>, <span style="color:#e5c07b;">HasSlug</span>;
}</code></pre>
</div>
<div class="feature-card">
<h3>match</h3>
<p>Exhaustive, strict branching with no fall-through.</p>
<pre><code><span style="color:#e06c75;">$label</span> = <span style="color:#c678dd;">match</span> (<span style="color:#e06c75;">$status</span>) {
<span style="color:#e5c07b;">Status</span>::<span style="color:#e06c75;">Draft</span> => <span style="color:#98c379;">'Draft'</span>,
<span style="color:#e5c07b;">Status</span>::<span style="color:#e06c75;">Published</span> => <span style="color:#98c379;">'Live'</span>,
};</code></pre>
</div>
<div class="feature-card">
<h3>readonly</h3>
<p>Immutability enforced by the language, not convention.</p>
<pre><code><span style="color:#c678dd;">final readonly class</span> <span style="color:#e5c07b;">Money</span>
{
<span style="color:#c678dd;">public function</span> <span style="color:#61afef;">__construct</span>(
<span style="color:#c678dd;">public</span> <span style="color:#e5c07b;">int</span> <span style="color:#e06c75;">$amount</span>,
) {}
}</code></pre>
</div>
<div class="feature-card">
<h3>Named arguments</h3>
<p>Order-free, self-documenting calls.</p>
<pre><code><span style="color:#c678dd;">new</span> <span style="color:#e5c07b;">Book</span>(
title: <span style="color:#98c379;">'Modern PHP'</span>,
status: <span style="color:#e5c07b;">Status</span>::<span style="color:#e06c75;">Draft</span>,
);</code></pre>
</div>
<div class="feature-card">
<h3>Nullsafe</h3>
<p>Chain through possibly-null values without nested checks.</p>
<pre><code><span style="color:#e06c75;">$country</span> = <span style="color:#e06c75;">$user</span>?-><span style="color:#e06c75;">address</span>?-><span style="color:#e06c75;">country</span>;</code></pre>
</div>
<div class="feature-card">
<h3>Attributes</h3>
<p>Structured, first-class metadata read at runtime.</p>
<pre><code><span style="color:#5c6370;">#[</span><span style="color:#e5c07b;">Route</span>(<span style="color:#98c379;">'/books'</span>, methods: [<span style="color:#98c379;">'GET'</span>])<span style="color:#5c6370;">]</span>
<span style="color:#c678dd;">public function</span> <span style="color:#61afef;">index</span>(): <span style="color:#e5c07b;">View</span></code></pre>
</div>
</div>
</section>

<hr>

<section id="ecosystem" class="reveal">
<h2>Ecosystem</h2>

Expand Down
25 changes: 25 additions & 0 deletions tests/Feature/WelcomePageTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php

test('the welcome page shows the feature showcase section', function () {
$this->get('/')
->assertOk()
->assertSee('The features that make PHP shine')
->assertSee('Named arguments')
->assertSee('Nullsafe')
->assertSee('Attributes');
});

test('the welcome page links to the features section', function () {
$this->get('/')
->assertOk()
->assertSee('href="#features"', false);
});

test('the welcome page includes enums and traits code tabs', function () {
$this->get('/')
->assertOk()
->assertSee('data-hero="enums"', false)
->assertSee('data-hero="traits"', false)
->assertSee('id="hero-enums"', false)
->assertSee('id="hero-traits"', false);
});