diff --git a/content/_index.md b/content/_index.md
index e9ecb8c..fecca50 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -4,40 +4,22 @@ title = "Phel: A Functional Lisp Dialect for PHP Developers"
**Phel** is a functional programming language that compiles down to PHP. It's a modern Lisp dialect inspired by [Clojure](https://clojure.org/) and [Janet](https://janet-lang.org/), tailored to bring functional elegance and expressive code to the world of PHP development.
-
-## Key Features of Phel
-
-Why code in Phel? Here's what makes it click:
-
-- ✅ Runs on the rock-solid PHP ecosystem
-- 🧠 Helpful and human-readable error messages
-- 📚 Built-in persistent data structures: Lists, Vectors, Maps, Sets
-- 🧩 Macro system for advanced metaprogramming
-- 🔁 Tail-recursive function support
-- ✨ Minimal, readable Lisp syntax
-- 💬 Interactive REPL for tinkering and prototyping
-
-## Why Choose Phel for Functional Programming in PHP?
-
-Phel started as an [experiment in writing functional PHP](/blog/functional-programming-in-php) and quickly turned into its own thing.
-
-It exists because we wanted:
-
-- A Lisp-inspired functional language
-- That runs on affordable PHP hosting
-- That's expressive, debug-friendly, and easy to pick up
-
-If you've ever wished PHP was a bit more... functional, Phel is for you.
-
-## See Phel in Action — Sample Code
+## See Phel in Action
```phel
# Define a namespace
@@ -54,31 +36,101 @@ If you've ever wished PHP was a bit more... functional, Phel is for you.
(print-name my-name)
```
-If you know Lisp or Clojure, you'll feel right at home. If you don't—this is a great place to start.
+
-## Try Phel Instantly with Docker
+## Key Features of Phel
-No setup? No problem. You can run Phel's REPL right away:
+Built for modern PHP development with functional programming principles
-```bash
-docker run -it --rm phellang/repl
-```
+{% features() %}
-
+{% feature_card(title="Built on PHP Ecosystem", description="Runs on the PHP ecosystem with access to all existing libraries", icon='
+
+## Why Choose Phel for Functional Programming in PHP?
+
+Phel started as an [experiment in writing functional PHP](/blog/functional-programming-in-php) and quickly turned into its own thing.
+
+
+
+
+
A Lisp-inspired functional language
+
+
+
+
That runs on affordable PHP hosting
+
+
+
+
That's expressive, debug-friendly, and easy to pick up
+
+
+
+If you've ever wished PHP was a bit more... functional, Phel is for you.
+
+
+
+## Try Phel Instantly with Docker
+
+No setup? No problem. You can run Phel's REPL right away:
+
+```bash
+docker run -it --rm phellang/repl
+```
+
+
diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css
index f26f825..a9a0040 100644
--- a/css/components/dark-mode.css
+++ b/css/components/dark-mode.css
@@ -776,3 +776,84 @@
.dark ::-moz-selection {
background: rgba(191, 164, 255, 0.3);
}
+
+/* Homepage Title Accent - Dark Mode */
+.dark .homepage-title-accent {
+ color: var(--color-dark-text-accent);
+}
+
+.dark .homepage-content > p:first-of-type {
+ color: var(--color-dark-text-primary);
+}
+
+.dark .why-card {
+ background: var(--color-dark-bg);
+ border-color: var(--color-dark-border);
+ color: var(--color-dark-text-primary);
+}
+
+.dark .why-card:hover {
+ border-color: var(--color-dark-text-accent);
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.dark .why-card-icon {
+ color: var(--color-dark-text-accent);
+}
+
+/* Homepage Code Section - Dark Mode */
+.dark .homepage-code-section {
+ background: rgba(191, 164, 255, 0.05);
+}
+
+/* Homepage CTA Buttons - Dark Mode */
+.dark .homepage-cta-primary {
+ background: var(--color-dark-text-accent);
+ border-color: var(--color-dark-text-accent);
+ color: var(--color-dark-bg);
+}
+
+.dark .homepage-cta-primary:hover {
+ background: #c2acf5;
+ border-color: #c2acf5;
+ color: var(--color-dark-bg);;
+}
+
+.dark .homepage-cta-secondary {
+ background: transparent;
+ color: var(--color-dark-text-primary);
+ border-color: var(--color-dark-border);
+}
+
+.dark .homepage-cta-secondary:hover {
+ border-color: var(--color-dark-text-accent);
+ color: var(--color-dark-text-accent);
+}
+
+/* Features Grid - Dark Mode */
+.dark .feature-card {
+ background: var(--color-dark-surface);
+ border-color: var(--color-dark-border);
+}
+
+.dark .feature-card:hover {
+ border-color: var(--color-dark-text-accent);
+ box-shadow: var(--shadow-dark-sm);
+}
+
+.dark .feature-icon {
+ color: var(--color-dark-text-accent);
+}
+
+.dark .feature-title {
+ color: var(--color-dark-text-primary);
+}
+
+.dark .feature-description {
+ color: var(--color-dark-text-secondary);
+}
+
+.dark .feature-items p,
+.dark .feature-items li {
+ color: var(--color-dark-text-secondary);
+}
diff --git a/css/components/features.css b/css/components/features.css
new file mode 100644
index 0000000..568055e
--- /dev/null
+++ b/css/components/features.css
@@ -0,0 +1,331 @@
+/* Homepage Content */
+.homepage-content h1 {
+ font-size: 2.5rem;
+ font-weight: 800;
+ line-height: 1.1;
+ margin: var(--space-3xl) 0 var(--space-lg);
+ text-align: center;
+}
+
+.homepage-title-accent {
+ color: var(--color-phel-primary);
+}
+
+@media (min-width: 640px) {
+ .homepage-content h1 {
+ font-size: 3rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .homepage-content h1 {
+ font-size: 3.5rem;
+ }
+}
+
+.homepage-content h2 {
+ text-align: center;
+ font-size: var(--text-3xl);
+}
+
+.homepage-content > h3 {
+ text-align: center;
+ font-size: var(--text-lg);
+}
+
+.homepage-content > p,
+.homepage-content > blockquote {
+ text-align: center;
+ font-size: var(--text-base);
+}
+
+.homepage-content > p:first-of-type {
+ font-size: var(--text-lg);
+ color: var(--color-light-text-secondary);
+ margin-bottom: var(--space-2xl);
+ max-width: 50rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.homepage-content img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: var(--space-3xl);
+ user-select: none;
+ -webkit-user-drag: none;
+ pointer-events: none;
+}
+
+.homepage-content pre {
+ margin-top: var(--space-2xl);
+ margin-bottom: var(--space-2xl);
+}
+
+/* Homepage Code Section */
+.homepage-code-section {
+ background: #fcfcff;
+ padding: var(--space-xl);
+ margin: var(--space-3xl) 0;
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+}
+
+.homepage-code-section pre {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+/* Homepage Why Section */
+.homepage-why-section h2 {
+ text-align: center;
+}
+
+.homepage-why-section > p {
+ text-align: center;
+ font-size: var(--text-lg);
+ max-width: 50rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.why-cards {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ margin: var(--space-2xl) auto;
+ max-width: 50rem;
+}
+
+@media (min-width: 768px) {
+ .why-cards {
+ flex-direction: row;
+ gap: var(--space-lg);
+ }
+}
+
+.why-card {
+ background: white;
+ border: 1px solid var(--color-light-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-lg);
+ text-align: center;
+ color: var(--color-light-text-primary);
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-md);
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.why-card:hover {
+ border-color: var(--color-phel-primary);
+ box-shadow: var(--shadow-sm);
+}
+
+.why-card-icon {
+ color: var(--color-phel-primary);
+}
+
+.why-card-icon svg {
+ width: 32px;
+ height: 32px;
+ stroke: currentColor;
+ stroke-width: 2;
+ fill: none;
+}
+
+.why-card-text {
+ font-size: var(--text-sm);
+ line-height: 1.6;
+}
+
+@media (min-width: 640px) {
+ .homepage-code-section {
+ padding: var(--space-xl);
+ }
+}
+
+@media (min-width: 1024px) {
+ .homepage-code-section {
+ padding: var(--space-xl) 0;
+ }
+
+ .homepage-code-section > * {
+ max-width: var(--container-content);
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: var(--space-xl);
+ padding-right: var(--space-xl);
+ }
+
+ .homepage-code-section pre {
+ max-width: var(--container-content);
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+/* Homepage CTA Buttons */
+.homepage-cta {
+ display: flex;
+ gap: var(--space-md);
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.homepage-cta-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ font-size: var(--text-sm);
+ font-weight: 600;
+ text-decoration: none;
+ border-radius: var(--radius-lg);
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.homepage-cta-button::after {
+ display: none;
+}
+
+.homepage-cta-primary {
+ background: var(--color-phel-primary);
+ color: white;
+ border: 2px solid var(--color-phel-primary);
+}
+
+.homepage-cta-primary:hover {
+ background: #6d3fc2;
+ border-color: #6d3fc2;
+}
+
+.homepage-cta-secondary {
+ background: transparent;
+ color: var(--color-light-text-primary);
+ border: 2px solid var(--color-light-border);
+}
+
+.homepage-cta-secondary:hover {
+ border-color: var(--color-phel-primary);
+ color: var(--color-phel-primary);
+}
+
+.homepage-cta-icon {
+ width: 20px;
+ height: 20px;
+ stroke: currentColor;
+ stroke-width: 2;
+ fill: none;
+}
+
+/* Features Grid */
+.features-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-lg);
+ margin: var(--space-2xl) 0;
+}
+
+@media (min-width: 640px) {
+ .features-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .features-grid {
+ grid-template-columns: repeat(3, 1fr);
+ gap: var(--space-xl);
+ }
+}
+
+/* Feature Card */
+.feature-card {
+ background: var(--color-light-bg-secondary);
+ border: 1px solid var(--color-light-border);
+ border-radius: var(--radius-xl);
+ padding: var(--space-lg);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-align: left;
+ gap: 0;
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.feature-card:hover {
+ border-color: var(--color-phel-primary);
+ box-shadow: var(--shadow-sm);
+}
+
+.feature-icon {
+ color: var(--color-phel-primary);
+ margin-bottom: var(--space-sm);
+}
+
+.feature-icon svg {
+ width: 24px;
+ height: 24px;
+ stroke: currentColor;
+ stroke-width: 2;
+ fill: none;
+}
+
+.feature-title {
+ font-size: var(--text-base);
+ font-weight: 600;
+ color: var(--color-light-text-primary);
+ margin: 0 0 var(--space-sm) 0;
+}
+
+.feature-description {
+ font-size: var(--text-xs);
+ color: var(--color-light-text-secondary);
+ line-height: 1.6;
+ margin: 0 0 var(--space-md) 0;
+}
+
+.feature-items {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ margin-top: auto;
+ padding-left: 0;
+}
+
+.feature-items p {
+ margin: 0;
+ font-size: var(--text-xs);
+ color: var(--color-light-text-secondary);
+ line-height: 1.6;
+}
+
+.feature-card .feature-items ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.feature-card .feature-items li {
+ position: relative;
+ padding-left: 0;
+ margin: 0;
+ font-size: var(--text-xs);
+ color: var(--color-light-text-secondary);
+ line-height: 1.6;
+}
+
+.feature-card .feature-items li::before {
+ display: none;
+}
+
diff --git a/css/components/header.css b/css/components/header.css
index f9b4863..0398fd8 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -586,24 +586,3 @@ body.menu-open {
opacity: 1;
}
}
-
-/* ========================================
- SCROLL EFFECTS
- ======================================== */
-
-@media (min-width: 1040px) {
- .site-header.scrolled {
- height: 60px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- }
-}
-
-/* Anchor scroll offset */
-[id]::before {
- content: '';
- display: block;
- height: var(--header-height);
- margin-top: calc(var(--header-height) * -1);
- visibility: hidden;
- pointer-events: none;
-}
diff --git a/css/theme.css b/css/theme.css
index e45d430..346dbc5 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -12,9 +12,10 @@
--color-light-text-secondary: #475569;
--color-light-text-muted: #64748b;
--color-light-text-accent: #0ea5e9;
- --color-light-link: #6366f1;
+ --color-light-link: #512da8;
--color-light-border: #e2e8f0;
--color-light-border-subtle: #f1f5f9;
+ --color-phel-primary: #512da8;
/* Modern Color Palette - Dark Mode */
--color-dark-bg: #212830;
diff --git a/scripts/concat-tailwind.js b/scripts/concat-tailwind.js
index 943a4cb..be9608b 100644
--- a/scripts/concat-tailwind.js
+++ b/scripts/concat-tailwind.js
@@ -15,6 +15,7 @@ const parts = [
'css/components/search.css',
'css/components/documentation.css',
'css/components/blog.css',
+ 'css/components/features.css',
'css/components/dark-mode.css',
'css/components/performance.css',
];
diff --git a/templates/index.html b/templates/index.html
index 8220169..5ee29f7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,6 +5,8 @@