From afe2e6ccdf75166882651740b104f447e9bcbaae Mon Sep 17 00:00:00 2001 From: JesusValera Date: Sat, 4 Oct 2025 16:30:53 +0200 Subject: [PATCH] Improve homepage --- content/_index.md | 148 +++++++---- css/components/dark-mode.css | 81 ++++++ css/components/features.css | 331 +++++++++++++++++++++++++ css/components/header.css | 21 -- css/theme.css | 3 +- scripts/concat-tailwind.js | 1 + templates/index.html | 6 +- templates/shortcodes/feature_card.html | 11 + templates/shortcodes/features.html | 4 + 9 files changed, 534 insertions(+), 72 deletions(-) create mode 100644 css/components/features.css create mode 100644 templates/shortcodes/feature_card.html create mode 100644 templates/shortcodes/features.html 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. -

- Phel language logo -

+Phel language logo -## Join the Phel Developer Community +
+ + + Try Phel with Docker + + + + Read Documentation + +
-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. +
-## 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() %} -![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='') %} +
  • • Seamless PHP interoperability
    • +
  • • Access to Composer packages
    • +
  • • Familiar deployment patterns
    • +{% 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='') %} +
  • • Structural sharing for performance
    • +
  • • Thread-safe by default
    • +
  • • Minimal, readable Lisp syntax
    • +{% 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='') %} +
  • • Powerful macro system
    • +
  • • Code as data philosophy
    • +
  • • Extensible language constructs
    • +{% 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='') %} +
  • • Live code evaluation
    • +
  • • Rapid prototyping
    • +
  • • Interactive development
    • +{% end %} -## Development Status & How to Contribute +{% feature_card(title="Lisp-inspired Syntax", description="Clean, expressive, and easy to pick up syntax", icon='') %} +
  • • Minimal, readable syntax
    • +
  • • Homoiconicity benefits
    • +
  • • Expressive and concise
    • +{% 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='') %} +
  • • Package management
    • +
  • • Testing frameworks
    • +
  • • Development server
    • +{% 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. +
    + +## 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 +``` + +![Try Phel animation](/try-phel.gif "Try Phel Animation") 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 @@ {% endblock meta_content %} {% block content %} -

    The Phel Language

    - {{ section.content | safe }} +
    +

    The Phel Language

    + {{ section.content | safe }} +
    {% endblock content %} diff --git a/templates/shortcodes/feature_card.html b/templates/shortcodes/feature_card.html new file mode 100644 index 0000000..58c62f3 --- /dev/null +++ b/templates/shortcodes/feature_card.html @@ -0,0 +1,11 @@ +
    +
    + {{ icon | safe }} +
    +

    {{ title }}

    +

    {{ description }}

    + +
    + diff --git a/templates/shortcodes/features.html b/templates/shortcodes/features.html new file mode 100644 index 0000000..0172bc7 --- /dev/null +++ b/templates/shortcodes/features.html @@ -0,0 +1,4 @@ +
    + {{ body | safe }} +
    +