Skip to content

Commit d1da33a

Browse files
phiro56madolson
phiro56
and
madolson
authored
feat(ui): redesign homepage with new visual elements (#234)
### Description: **Redesign homepage with new visual elements** - Add hero section with gradient background and new hero image - Implement new documentation cards layout - Enhance "What's New" section styling **Notes:** New header and footer design will be updated in a separate PR ![screencapture-127-0-0-1-1111-2025-04-04-09_33_29](https://github.com/user-attachments/assets/ae87e7cb-a07a-40d7-8c92-33c11d1c4e1b) --------- Signed-off-by: Daniel Phillips <[email protected]> Signed-off-by: Madelyn Olson <[email protected]> Co-authored-by: Madelyn Olson <[email protected]>
1 parent 6cf7c4e commit d1da33a

File tree

5 files changed

+424
-89
lines changed

5 files changed

+424
-89
lines changed

‎content/_index.md

+33-9
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,39 @@ github_org= "https://github.com/valkey-io"
77
github_org_text= "All repos in the Valkey GitHub organization"
88

99
headline= "Valkey: an open source, in-memory data store"
10-
1110
long_description= ""
1211

12+
[extra.hero]
13+
headings = ["FAST.", "RELIABLE.", "OPEN SOURCE, FOREVER."]
14+
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."
15+
button_text = "GET STARTED"
16+
button_url = "/topics/quickstart"
17+
18+
[[extra.documentation_cards]]
19+
title = "Install"
20+
description = "Step-by-step instructions on how to install and configure Valkey for first-time users."
21+
button_text = "See Installation Guide"
22+
button_url = "/topics/installation"
23+
24+
[[extra.documentation_cards]]
25+
title = "Usage guide"
26+
description = "Detailed documentation on the various datatype supported by Valkey and best practices."
27+
button_text = "Documentation by topic"
28+
button_url = "/topics/"
29+
30+
[[extra.documentation_cards]]
31+
title = "Valkey API"
32+
description = "View the full list of Valkey commands including first party modules."
33+
button_text = "Command Reference"
34+
button_url = "/commands"
35+
36+
[[extra.documentation_cards]]
37+
title = "Clients"
38+
description = "Official Valkey client libraries include support for:"
39+
features = ["Python", "Java", "Go", "Node.js", "PHP"]
40+
button_text = "Learn More"
41+
button_url = "/clients"
42+
1343
[[extra.download_ctas]]
1444
text= "Get Valkey"
1545
url= "/download/"
@@ -18,7 +48,6 @@ url= "/download/"
1848
url= "/docs/"
1949
title= "Read the docs"
2050

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

2857
+++
2958

30-
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**.
31-
Valkey can run as either a **standalone** daemon or in a **cluster**, with options for **replication** and **high availability**.
59+
## Documentation
3260

33-
Valkey natively supports a rich collection of datatypes, including **strings**, **numbers**, **hashes**, **lists**, **sets**, **sorted sets**, **bitmaps**, **hyperloglogs** and more.
61+
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.
3462
You can operate on data structures in-place with an expressive collection of commands.
3563
Valkey also supports native extensibility with built-in scripting support for **Lua** and supports **module** plugins to create new commands, data types, and more.
36-
37-
---
38-
39-
**Get Started**: Join the vibrant Valkey community and check out the code on [GitHub](https://github.com/valkey-io/valkey).

‎sass/_valkey.scss

+255-14
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,6 @@ p {
176176
.body {
177177
flex-grow: 1;
178178
height: 100%;
179-
margin-bottom: 20px;
180179

181180
.width-limiter {
182181
background: #fff;
@@ -271,6 +270,43 @@ p {
271270
}
272271
}
273272

273+
.row {
274+
display: flex;
275+
margin: 0 auto;
276+
flex-wrap: wrap;
277+
width: 100%;
278+
max-width: var(--max-width);
279+
280+
.col {
281+
flex: 1 1 100%;
282+
padding: 0 2rem;
283+
}
284+
285+
.col-10 {
286+
flex: 1 1 83.33%;
287+
}
288+
289+
.col-8 {
290+
flex: 1 1 66.66%;
291+
}
292+
293+
.col-6 {
294+
flex: 1 1 50%;
295+
}
296+
297+
.col-4 {
298+
flex: 1 1 33.33%;
299+
}
300+
301+
.col_3 {
302+
flex: 1 1 100%;
303+
304+
@include respond-min(768px) {
305+
flex: 1 1 25%;
306+
}
307+
}
308+
}
309+
274310
.page-title {
275311
max-width: var(--max-width);
276312
background: #fff;
@@ -348,18 +384,6 @@ aside {
348384
}
349385
}
350386

351-
.sidebar-repo,
352-
.whats-new-post {
353-
h4 {
354-
margin-top: 1.25em;
355-
margin-bottom: .25em;
356-
}
357-
358-
p {
359-
margin-top: .5em;
360-
}
361-
}
362-
363387
.link-readmore {
364388
font-size: 1.2rem;
365389
@include sans-serif;
@@ -838,4 +862,221 @@ pre table {
838862
.checkmark-false {
839863
color: rgb(190, 9, 9);
840864
font-weight: bold;
841-
}
865+
}
866+
867+
// Hero Section Styles
868+
.hero-section {
869+
position: relative;
870+
min-height: none;
871+
background-size: cover;
872+
background-position: center bottom;
873+
background-color: #30186e;
874+
background-image: linear-gradient(to bottom, rgba(48, 24, 110, 0.15), rgba(48, 24, 110, 0.75)), url('/img/hero-bg.webp');
875+
display: flex;
876+
align-items: center;
877+
justify-content: center;
878+
overflow: hidden;
879+
padding: 8rem 2rem;
880+
881+
@include respond-min(768px) {
882+
padding: 8rem 2rem;
883+
min-height: 75vh;
884+
885+
}
886+
}
887+
888+
.hero-content {
889+
max-width: 1200px;
890+
text-align: center;
891+
z-index: 1;
892+
color: white;
893+
}
894+
895+
.hero-heading {
896+
font-size: 4rem;
897+
font-weight: 700;
898+
margin: 0;
899+
line-height: 1;
900+
letter-spacing: 2px;
901+
color: white;
902+
903+
@include respond-min(768px) {
904+
font-size: 8rem;
905+
}
906+
}
907+
908+
.hero-subtitle {
909+
font-size: 1.8rem;
910+
font-weight: 700;
911+
max-width: 800px;
912+
margin: 2rem auto 4rem;
913+
line-height: 1.6;
914+
color: rgba(255,255,255,0.9);
915+
}
916+
917+
.hero-button {
918+
display: inline-block;
919+
line-height: 1.2;
920+
border-radius: 30px;
921+
font-weight: 600;
922+
height: auto;
923+
font-size: 2.4rem;
924+
color: #6983FF;
925+
padding: 10px 20px;
926+
background-image: linear-gradient(to right, #ffffff, #B7C2F7);
927+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
928+
transition: all 0.3s ease-in-out;
929+
min-width: 100%;
930+
931+
@include respond-min(768px) {
932+
min-width: 380px;
933+
}
934+
}
935+
936+
// Documentation Section Styles
937+
.documentation-section {
938+
padding-bottom: 4rem;
939+
background-image: linear-gradient(rgb(48, 23, 110), rgb(105, 131, 255));
940+
position: relative;
941+
text-align: center;
942+
color: white;
943+
944+
@include respond-min(768px) {
945+
padding-bottom: 8rem;
946+
}
947+
948+
.col {
949+
max-width: 890px;
950+
margin: 0 auto;
951+
}
952+
953+
a {
954+
color: white;
955+
text-decoration: underline;
956+
}
957+
958+
h2 {
959+
width: 100%;
960+
line-height: 1.2;
961+
font-size: 3.75rem;
962+
text-align: center;
963+
font-weight: 700;
964+
margin-bottom: 1.75rem;
965+
966+
@include respond-min(768px) {
967+
font-size: 6rem;
968+
}
969+
}
970+
971+
p {
972+
margin-bottom: 2rem;
973+
}
974+
}
975+
976+
.documentation-card-grid {
977+
margin-top: 4rem;
978+
}
979+
980+
.documentation-card {
981+
display: flex;
982+
flex-direction: column;
983+
gap: 0.5rem;
984+
padding: 4rem;
985+
border-radius: 20px;
986+
color: white;
987+
background: #2d2471;
988+
margin-bottom: 3rem;
989+
990+
@include respond-min(768px) {
991+
margin-bottom: 0;
992+
min-height: 100%;
993+
}
994+
995+
h3 {
996+
font-weight: 700;
997+
font-size: 2rem;
998+
line-height: 1.2;
999+
text-align: center;
1000+
color: white;
1001+
margin: 0 0 .5rem;
1002+
}
1003+
1004+
p {
1005+
text-align: left;
1006+
margin: 0;
1007+
}
1008+
1009+
ul {
1010+
text-align: left;
1011+
padding: 0 0 0 18px;
1012+
margin: 10px 0 20px;
1013+
}
1014+
1015+
a.btn {
1016+
color: white;
1017+
border-radius: 24px;
1018+
border: 1px solid currentcolor;
1019+
padding: 1rem;
1020+
margin-top: auto;
1021+
text-decoration: none;
1022+
}
1023+
}
1024+
1025+
// What's New Section Styles
1026+
.whats-new-section {
1027+
padding: 4rem 2rem;
1028+
background-image: linear-gradient(rgb(105, 131, 255), rgb(48, 23, 110));
1029+
1030+
@include respond-min(768px) {
1031+
padding: 8rem 0;
1032+
}
1033+
1034+
h2 {
1035+
width: 100%;
1036+
line-height: 1.2;
1037+
font-size: 3.75rem;
1038+
color: white;
1039+
text-align: center;
1040+
font-weight: 700;
1041+
margin: 0 0 1.75rem;
1042+
1043+
@include respond-min(768px) {
1044+
font-size: 6rem;
1045+
}
1046+
}
1047+
}
1048+
1049+
.whats-new-inner {
1050+
display: flex;
1051+
width: 100%;
1052+
padding: 2rem;
1053+
border-radius: 20px;
1054+
background: rgba(255, 255, 255, 0.2);
1055+
1056+
@include respond-min(768px) {
1057+
padding: 4rem;
1058+
}
1059+
1060+
h3 {
1061+
color: white;
1062+
font-size: 2.75rem;
1063+
font-weight: 700;
1064+
width: 100%;
1065+
margin: 0 0 1rem;
1066+
}
1067+
1068+
.inner-card {
1069+
background: white;
1070+
padding: 3rem;
1071+
border-radius: 20px;
1072+
margin: 0 0 3rem;
1073+
1074+
h4 {
1075+
margin: 0 0 1rem;
1076+
}
1077+
1078+
hr {
1079+
margin: 2rem 0;
1080+
}
1081+
}
1082+
}

‎static/img/hero-bg.webp

56.1 KB
Binary file not shown.

‎templates/includes/release.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h5>{{package_manager.name}}:</h5>
2828
{% endif %}
2929
{% endfor %}
3030
{% endif %}
31-
<hr />
31+
3232
<h4>Binary Artifacts</h4>
3333
{% if release.artifacts %}
3434
{% for artifact in release.artifacts %}
@@ -38,4 +38,4 @@ <h4>Binary Artifacts</h4>
3838
<a href="{{fname}}">{{arch}} / {{artifact.distro}}</a> <small>(<a href="{{fname}}.sha256">sha256</a>)</small><br />
3939
{% endfor %}
4040
{% endfor %}
41-
{% endif %}
41+
{% endif %}

0 commit comments

Comments
 (0)