Skip to content

feat: add new CTA to hero section #310

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add new CTA to hero section #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ 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"
second_button_text = "READ THE BLOG"
second_button_url = "/blog"

[[extra.documentation_cards]]
title = "Install"
Expand Down
47 changes: 40 additions & 7 deletions sass/_valkey.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1554,15 +1554,28 @@ pre table {
}

.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);
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 {
.hero-buttons {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
justify-content: center;

@include respond-min(768px) {
flex-direction: row;
gap: 2 }
}

.hero-button,
.hero-button-sec {
display: inline-block;
line-height: 1.2;
border-radius: 30px;
Expand All @@ -1572,15 +1585,35 @@ pre table {
color: #6983FF;
padding: 10px 20px;
background-image: linear-gradient(to right, #ffffff, #B7C2F7);
border: 1px solid transparent;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease-in-out;
min-width: 100%;

&:hover {
background-image: linear-gradient(to left, #ffffff, #ffffff);
}

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

.hero-button-sec {
background: rgba(105, 131, 255, 0.2);
border-color: #6983FF;
color: #fff;

&:hover {
background: rgba(105, 131, 255, 0.5);
}

&:visited {
color: #fff;
}
}


// Documentation Section Styles
.documentation-section {
padding-bottom: 4rem;
Expand Down
7 changes: 6 additions & 1 deletion templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ <h1 class="hero-heading">{{ heading }}</h1>
<p class="hero-subtitle">
{{ section.extra.hero.subtitle }}
</p>
<a href="{{ section.extra.hero.button_url }}" class="hero-button">{{ section.extra.hero.button_text }}</a>
<div class="hero-buttons">
{% if section.extra.hero.second_button_text and section.extra.hero.second_button_url %}
<a href="{{ section.extra.hero.second_button_url }}" class="hero-button-sec">{{ section.extra.hero.second_button_text }}</a>
{% endif %}
<a href="{{ section.extra.hero.button_url }}" class="hero-button">{{ section.extra.hero.button_text }}</a>
</div>
</div>
</div>
{% endif %}
Expand Down