_content: Why Go - new cards
New cards from the Why Go designs.
- Adds new card from design to Use Cases and Case Studies.
- Slider omitted because it's redesign will be in another cr.
Screenshot:(Use Cases)
https://drive.google.com/file/d/1XZOmbLkzTCIriGuivAyAeI-HhOReDOjJ/view?usp=sharing
Screenshot: (Case Studies)
https://drive.google.com/file/d/1qiCCpARiqSSvOVcN6nOc5kci61cldAo0/view?usp=sharing
Change-Id: I4d3d465d694dffee455ab3beb3eaba4b1b862629
Reviewed-on: https://go-review.googlesource.com/c/website/+/436336
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
diff --git a/_content/css/styles.css b/_content/css/styles.css
index c376e18..1774461 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -1831,6 +1831,21 @@
.Solutions-forwardArrowIcon {
font-size: 1rem;
}
+.Solutions-header {
+ padding: 0 1.5rem;
+ margin: 2.5rem auto;
+ max-width: 75.75rem;
+}
+.Solutions-header .SiteBreadcrumb {
+ margin-bottom: 2rem;
+}
+.Solutions-useCase__title {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 36px;
+ line-height: 32px;
+ color: var(--color-text);
+}
@media only screen and (min-width: 57.7rem) {
.WhyGo-reasons {
grid-template-columns: repeat(2, 1fr);
@@ -3016,6 +3031,67 @@
.Solutions-useCasesHeader h2,
.Solutions-caseStudiesHeader h2 {
}
+.MarketingCardList {
+ list-style: none;
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1.75rem;
+ padding: unset;
+}
+.MarketingCard {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ padding: 0 1.75rem;
+ text-align: left;
+ box-sizing: border-box;
+ width: auto;
+ height: auto;
+ min-height: 24.625rem;
+ background: var(--color-background);
+ border: var(--border);
+ border-radius: 0.25rem;
+}
+.MarketingCard a:hover {
+ text-decoration: none;
+}
+.MarketingCard-section {
+ margin-top: 2.625rem;
+}
+.MarketingCard-section__bottom {
+ position: absolute;
+ bottom: 2.625rem;
+}
+.MarketingCard-section__spacer {
+ padding-bottom: 6.25rem;
+}
+.MarketingCard-title {
+ color: var(--color-text);
+ font-size: 1.125rem;
+ line-height: 1.5rem;
+ font-weight: 500;
+ font-style: normal;
+}
+.MarketingCard-body {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ letter-spacing: 0.1px;
+ color: var(--color-text-subtle);
+}
+.MarketingCard-action {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ letter-spacing: 0.1px;
+ color: var(--color-text-link);
+ background: unset;
+ border: none;
+ padding: unset;
+ cursor: pointer;
+}
.Solutions-cardList,
.Solutions-caseStudyList {
display: grid;
@@ -3038,7 +3114,7 @@
flex: 0 100%;
}
@media only screen and (min-width: 38rem) {
- .Solutions-cardList {
+ .Solutions-cardList, .MarketingCardList {
grid-template-columns: repeat(2, 1fr);
}
}
@@ -3051,7 +3127,7 @@
box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22);
transition: all 0.2s ease-in-out;
}
- .Solutions-cardList {
+ .Solutions-cardList, .MarketingCardList {
grid-template-columns: repeat(3, 1fr);
}
}
diff --git a/_content/solutions/case-studies.md b/_content/solutions/case-studies.md
new file mode 100644
index 0000000..024f14e
--- /dev/null
+++ b/_content/solutions/case-studies.md
@@ -0,0 +1,57 @@
+---
+title: Case Studies
+layout: none
+---
+
+{{$solutions := pages "/solutions/*"}}
+<section class="Solutions-useCases">
+ <div class="Container">
+ <ul class="MarketingCardList">
+ {{- range $solutions}}
+ {{- if eq .series "Case Studies"}}
+ <li class="MarketingCard">
+ {{- if .link}}
+ <a
+ href="{{.link}}"
+ target="_blank"
+ rel="noopener"
+ >
+ {{- else}}
+ <a href="{{.URL}}">
+ {{- end}}
+ <div class="MarketingCard-section">
+ <img
+ height="36"
+ class="DarkMode-img"
+ loading="lazy"
+ alt="{{.company}}"
+ src="/images/logos/{{.logoSrcDark}}"
+ />
+ <img
+ height="36"
+ class="LightMode-img"
+ loading="lazy"
+ alt="{{.company}}"
+ src="/images/logos/{{.logoSrc}}"
+ />
+ </div>
+ <div class="MarketingCard-section MarketingCard-section__spacer">
+ <h2 class="MarketingCard-title">{{or .linkTitle .title}}</h2>
+ <p class="MarketingCard-body">
+ {{- if .link}}
+ {{.description}}
+ {{- else}}
+ {{with .quote}}{{.}}{{end}}
+ {{- end}}
+ </p>
+ </div>
+ <div class="MarketingCard-section__bottom">
+ <p class="MarketingCard-action">View Case Study</p>
+ </div>
+ </a>
+ </li>
+ {{- end}}
+ {{- end}}
+ <ul>
+ </div>
+</section>
diff --git a/_content/solutions/use-cases.md b/_content/solutions/use-cases.md
new file mode 100644
index 0000000..03c0623
--- /dev/null
+++ b/_content/solutions/use-cases.md
@@ -0,0 +1,57 @@
+---
+title: Use Cases
+layout: none
+---
+
+{{$solutions := pages "/solutions/*"}}
+<section class="Solutions-header">
+ <div class="Container">
+ {{breadcrumbs .}}
+ <h1 class="Solutions-useCase__title">Use Cases</h1>
+ </div>
+</section>
+<section class="Solutions-useCases">
+ <div class="Container">
+ <ul class="MarketingCardList">
+ {{- range newest $solutions}}
+ {{- if eq .series "Use Cases"}}
+ <li class="MarketingCard">
+ <a href="{{.URL}}">
+ <div class="MarketingCard-section">
+ {{- $icon := .icon}}
+ {{- $iconDark := .iconDark}}
+ {{- if $icon}}
+ <img
+ class="LightMode-img"
+ loading="lazy"
+ alt="{{$icon.alt}}"
+ src="{{path.Dir .URL}}/{{$icon.file}}"
+ />
+ {{- end}}
+ {{- if $iconDark}}
+ <img
+ class="DarkMode-img"
+ loading="lazy"
+ alt="{{$iconDark.alt}}"
+ src="{{path.Dir .URL}}/{{$iconDark.file}}"
+ />
+ {{- end}}
+ </div>
+ <div class="MarketingCard-section MarketingCard-section__spacer">
+ <h3 class="MarketingCard-title">{{or .linkTitle .title}}</h3>
+ <p class="MarketingCard-body">
+ {{.description}}
+ </p>
+ </div>
+ <div class="MarketingCard-section__bottom">
+ <p class="MarketingCard-action">
+ Learn More
+ </p>
+ </div>
+ </a>
+ </li>
+ {{- end}}
+ {{- end}}
+ </ul>
+ </div>
+</section>
