Skip to content

feat(ui): redesign homepage with new visual elements #234

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

Merged
merged 6 commits into from
Apr 16, 2025
Merged

feat(ui): redesign homepage with new visual elements #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ec77598
feat(ui): redesign homepage with new visual elements
phiro56 Apr 4, 2025
e6fb087
Update content/_index.md
phiro56 Apr 16, 2025
c5426ff
Update content/_index.md
phiro56 Apr 16, 2025
5cea852
Update content/_index.md
phiro56 Apr 16, 2025
3ba379f
Update content/_index.md
phiro56 Apr 16, 2025
9214ccb
Update content/_index.md
madolson Apr 16, 2025
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
42 changes: 33 additions & 9 deletions content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,39 @@ github_org= "https://github.com/valkey-io"
github_org_text= "All repos in the Valkey GitHub organization"

headline= "Valkey: an open source, in-memory data store"

long_description= ""

[extra.hero]
headings = ["FAST.", "RELIABLE.", "OPEN SOURCE, FOREVER."]
subtitle = "Valkey is an open source (BSD) high-performance key/value datastore that supports a variety of workloads such as caching, message queues, and can act as a primary database. The project is backed by the Linux Foundation, ensuring it will remain open source forever."
button_text = "GET STARTED"
button_url = "/topics/quickstart"

[[extra.documentation_cards]]
title = "Install"
description = "Step-by-step instructions on how to install and configure Valkey for first-time users."
button_text = "See Installation Guide"
button_url = "/topics/installation"

[[extra.documentation_cards]]
title = "Usage guide"
description = "Detailed documentation on the various datatype supported by Valkey and best practices."
button_text = "Documentation by topic"
button_url = "/topics/"

[[extra.documentation_cards]]
title = "Valkey API"
description = "View the full list of Valkey commands including first party modules."
button_text = "Command Reference"
button_url = "/commands"

[[extra.documentation_cards]]
title = "Clients"
description = "Official Valkey client libraries include support for:"
features = ["Python", "Java", "Go", "Node.js", "PHP"]
button_text = "Learn More"
button_url = "/clients"

[[extra.download_ctas]]
text= "Get Valkey"
url= "/download/"
Expand All @@ -18,7 +48,6 @@ url= "/download/"
url= "/docs/"
title= "Read the docs"


[[extra.sidebar]]
title= "Founding documents"
[[extra.sidebar.links]]
Expand All @@ -27,13 +56,8 @@ url= "https://www.linuxfoundation.org/press/linux-foundation-launches-open-sourc

+++

Valkey is an open source (BSD) high-performance key/value datastore that supports a variety of workloads such as **caching**, **message queues**, and can act as a **primary database**.
Valkey can run as either a **standalone** daemon or in a **cluster**, with options for **replication** and **high availability**.
## Documentation

Valkey natively supports a rich collection of datatypes, including **strings**, **numbers**, **hashes**, **lists**, **sets**, **sorted sets**, **bitmaps**, **hyperloglogs** and more.
Valkey can run as either a **standalone** daemon or in a **cluster**, with options for **replication** and **high availability**. Valkey natively supports a rich collection of datatypes, including **strings**, **numbers**, **hashes**, **lists**, **sets**, **sorted sets**, **bitmaps**, **hyperloglogs** and more.
You can operate on data structures in-place with an expressive collection of commands.
Valkey also supports native extensibility with built-in scripting support for **Lua** and supports **module** plugins to create new commands, data types, and more.

---

**Get Started**: Join the vibrant Valkey community and check out the code on [GitHub](https://github.com/valkey-io/valkey).
269 changes: 255 additions & 14 deletions sass/_valkey.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,6 @@ p {
.body {
flex-grow: 1;
height: 100%;
margin-bottom: 20px;

.width-limiter {
background: #fff;
Expand Down Expand Up @@ -271,6 +270,43 @@ p {
}
}

.row {
display: flex;
margin: 0 auto;
flex-wrap: wrap;
width: 100%;
max-width: var(--max-width);

.col {
flex: 1 1 100%;
padding: 0 2rem;
}

.col-10 {
flex: 1 1 83.33%;
}

.col-8 {
flex: 1 1 66.66%;
}

.col-6 {
flex: 1 1 50%;
}

.col-4 {
flex: 1 1 33.33%;
}

.col_3 {
flex: 1 1 100%;

@include respond-min(768px) {
flex: 1 1 25%;
}
}
}

.page-title {
max-width: var(--max-width);
background: #fff;
Expand Down Expand Up @@ -348,18 +384,6 @@ aside {
}
}

.sidebar-repo,
.whats-new-post {
h4 {
margin-top: 1.25em;
margin-bottom: .25em;
}

p {
margin-top: .5em;
}
}

.link-readmore {
font-size: 1.2rem;
@include sans-serif;
Expand Down Expand Up @@ -838,4 +862,221 @@ pre table {
.checkmark-false {
color: rgb(190, 9, 9);
font-weight: bold;
}
}

// Hero Section Styles
.hero-section {
position: relative;
min-height: none;
background-size: cover;
background-position: center bottom;
background-color: #30186e;
background-image: linear-gradient(to bottom, rgba(48, 24, 110, 0.15), rgba(48, 24, 110, 0.75)), url('/img/hero-bg.webp');
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 8rem 2rem;

@include respond-min(768px) {
padding: 8rem 2rem;
min-height: 75vh;

}
}

.hero-content {
max-width: 1200px;
text-align: center;
z-index: 1;
color: white;
}

.hero-heading {
font-size: 4rem;
font-weight: 700;
margin: 0;
line-height: 1;
letter-spacing: 2px;
color: white;

@include respond-min(768px) {
font-size: 8rem;
}
}

.hero-subtitle {
font-size: 1.8rem;
font-weight: 700;
max-width: 800px;
margin: 2rem auto 4rem;
line-height: 1.6;
color: rgba(255,255,255,0.9);
}

.hero-button {
display: inline-block;
line-height: 1.2;
border-radius: 30px;
font-weight: 600;
height: auto;
font-size: 2.4rem;
color: #6983FF;
padding: 10px 20px;
background-image: linear-gradient(to right, #ffffff, #B7C2F7);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease-in-out;
min-width: 100%;

@include respond-min(768px) {
min-width: 380px;
}
}

// Documentation Section Styles
.documentation-section {
padding-bottom: 4rem;
background-image: linear-gradient(rgb(48, 23, 110), rgb(105, 131, 255));
position: relative;
text-align: center;
color: white;

@include respond-min(768px) {
padding-bottom: 8rem;
}

.col {
max-width: 890px;
margin: 0 auto;
}

a {
color: white;
text-decoration: underline;
}

h2 {
width: 100%;
line-height: 1.2;
font-size: 3.75rem;
text-align: center;
font-weight: 700;
margin-bottom: 1.75rem;

@include respond-min(768px) {
font-size: 6rem;
}
}

p {
margin-bottom: 2rem;
}
}

.documentation-card-grid {
margin-top: 4rem;
}

.documentation-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 4rem;
border-radius: 20px;
color: white;
background: #2d2471;
margin-bottom: 3rem;

@include respond-min(768px) {
margin-bottom: 0;
min-height: 100%;
}

h3 {
font-weight: 700;
font-size: 2rem;
line-height: 1.2;
text-align: center;
color: white;
margin: 0 0 .5rem;
}

p {
text-align: left;
margin: 0;
}

ul {
text-align: left;
padding: 0 0 0 18px;
margin: 10px 0 20px;
}

a.btn {
color: white;
border-radius: 24px;
border: 1px solid currentcolor;
padding: 1rem;
margin-top: auto;
text-decoration: none;
}
}

// What's New Section Styles
.whats-new-section {
padding: 4rem 2rem;
background-image: linear-gradient(rgb(105, 131, 255), rgb(48, 23, 110));

@include respond-min(768px) {
padding: 8rem 0;
}

h2 {
width: 100%;
line-height: 1.2;
font-size: 3.75rem;
color: white;
text-align: center;
font-weight: 700;
margin: 0 0 1.75rem;

@include respond-min(768px) {
font-size: 6rem;
}
}
}

.whats-new-inner {
display: flex;
width: 100%;
padding: 2rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.2);

@include respond-min(768px) {
padding: 4rem;
}

h3 {
color: white;
font-size: 2.75rem;
font-weight: 700;
width: 100%;
margin: 0 0 1rem;
}

.inner-card {
background: white;
padding: 3rem;
border-radius: 20px;
margin: 0 0 3rem;

h4 {
margin: 0 0 1rem;
}

hr {
margin: 2rem 0;
}
}
}
Binary file added static/img/hero-bg.webp
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions templates/includes/release.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h5>{{package_manager.name}}:</h5>
{% endif %}
{% endfor %}
{% endif %}
<hr />

<h4>Binary Artifacts</h4>
{% if release.artifacts %}
{% for artifact in release.artifacts %}
Expand All @@ -38,4 +38,4 @@ <h4>Binary Artifacts</h4>
<a href="{{fname}}">{{arch}} / {{artifact.distro}}</a> <small>(<a href="{{fname}}.sha256">sha256</a>)</small><br />
{% endfor %}
{% endfor %}
{% endif %}
{% endif %}
Loading