Improve homepage

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.
 
-<p align="center">
-    <img src="/images/logo_phel.svg" width="350" alt="Phel language logo"/>
-</p>
+<img src="/images/logo_phel.svg" width="450" alt="Phel language logo"/>
 
-## Join the Phel Developer Community
+<div class="homepage-cta">
+  <a href="#try-phel-instantly-with-docker" class="homepage-cta-button homepage-cta-primary">
+    <svg class="homepage-cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+    Try Phel with Docker
+  </a>
+  <a href="/documentation/getting-started" class="homepage-cta-button homepage-cta-secondary">
+    <svg class="homepage-cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+    Read Documentation
+  </a>
+</div>
 
-Got questions? Want to chat about macros, tail recursion, or why parentheses are awesome?  
-Swing by the [Phel Gitter channel](https://gitter.im/phel-lang/community)—we're friendly, nerdy, and always happy to talk code.
+<div class="homepage-code-section">
 
-## 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.
+</div>
 
-## 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() %}
 
-![Try Phel animation](/try-phel.gif "Try Phel Animation")
+{% feature_card(title="Built on PHP Ecosystem", description="Runs on the PHP ecosystem with access to all existing libraries", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 3l-7 7 7 7M15 3l7 7-7 7"/></svg>') %}
+<li>• Seamless PHP interoperability</li>
+<li>• Access to Composer packages</li>
+<li>• Familiar deployment patterns</li>
+{% end %}
 
-## Get Started with Phel in Minutes
+{% feature_card(title="Immutable Data Structures", description="Built-in persistent data structures like Lists, Vectors, Maps, and Sets", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>') %}
+<li>• Structural sharing for performance</li>
+<li>• Thread-safe by default</li>
+<li>• Minimal, readable Lisp syntax</li>
+{% end %}
 
-All you need is [PHP >=8.3](https://www.php.net/) and [Composer](https://getcomposer.org/).
+{% feature_card(title="Macro System", description="Advanced metaprogramming capabilities for code generation", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>') %}
+<li>• Powerful macro system</li>
+<li>• Code as data philosophy</li>
+<li>• Extensible language constructs</li>
+{% end %}
 
-> Follow our [Getting Started Guide](/documentation/getting-started) to build and run your first Phel program today.
+{% feature_card(title="Interactive REPL", description="Interactive REPLs for iterating and prototyping", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>') %}
+<li>• Live code evaluation</li>
+<li>• Rapid prototyping</li>
+<li>• Interactive development</li>
+{% end %}
 
-## Development Status & How to Contribute
+{% feature_card(title="Lisp-inspired Syntax", description="Clean, expressive, and easy to pick up syntax", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>') %}
+<li>• Minimal, readable syntax</li>
+<li>• Homoiconicity benefits</li>
+<li>• Expressive and concise</li>
+{% end %}
 
-Phel is approaching its 1.0 release, but we're still actively refining the language —and yes, breaking changes may happen.
+{% feature_card(title="Modern Tooling", description="Comprehensive development tools and ecosystem", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>') %}
+<li>• Package management</li>
+<li>• Testing frameworks</li>
+<li>• Development server</li>
+{% end %}
 
-We're building this in the open. That means:
-- Found a bug? File an issue.
-- Got a cool idea? Open a pull request.
-- Want to shape the language's future? Let's talk.
+{% end %}
 
-Your feedback, ideas, and code help Phel grow into something great.
+<div class="homepage-code-section homepage-why-section">
+
+## 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.
+
+<div class="why-cards">
+  <div class="why-card">
+    <div class="why-card-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="12 6 12 12 16 14"></polyline>
+      </svg>
+    </div>
+    <div class="why-card-text">A Lisp-inspired functional language</div>
+  </div>
+  <div class="why-card">
+    <div class="why-card-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+      </svg>
+    </div>
+    <div class="why-card-text">That runs on affordable PHP hosting</div>
+  </div>
+  <div class="why-card">
+    <div class="why-card-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+        <polyline points="14 2 14 8 20 8"></polyline>
+        <line x1="16" y1="13" x2="8" y2="13"></line>
+        <line x1="16" y1="17" x2="8" y2="17"></line>
+        <polyline points="10 9 9 9 8 9"></polyline>
+      </svg>
+    </div>
+    <div class="why-card-text">That's expressive, debug-friendly, and easy to pick up</div>
+  </div>
+</div>
+
+If you've ever wished PHP was a bit more... functional, Phel is for you.
+
+</div>
+
+## Try Phel Instantly with Docker
+
+No setup? No problem. You can run Phel's REPL right away:
+
+```bash
+docker run -it --rm phellang/repl
+```
+
+![Try Phel animation](/try-phel.gif "Try Phel Animation")

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);
+}