templates/hugo-saasify-theme
1
0
Fork 0
mirror of https://github.com/chaoming/hugo-saasify-theme.git synced 2025-04-21 05:21:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update customer logo with gradient background and better spacing

Browse source
This commit is contained in:
Chaoming Li 2024-11-18 11:15:15 +11:00
parent 35d5eed8fe
commit 87c7bc0fe5
2 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layouts/shortcodes/client-logos.html
View file

@ -1,7 +1,7 @@
<section class="border-y border-gray-100 overflow-hidden"> <section class="border-y border-gray-100 overflow-hidden">
<div class="py-12"> <div class="py-12">
<p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p> <p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p>
<div class="logo-scroll{{ if eq (.Get "animate" | default "true") "false" }} static{{ end }}"> <div class="logo-scroll">
<div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}"> <div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
{{ range .Page.Params.client_logos }} {{ range .Page.Params.client_logos }}
<img src="{{ .logo | relURL }}" alt="{{ .name }}" /> <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
@ -46,7 +46,7 @@
} }
.logos-slide img { .logos-slide img {
height: 32px; height: 48px;
margin: 0 40px; margin: 0 40px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

27
static/images/client-logo-1.svg
View file

@ -1,4 +1,25 @@
<svg width="160" height="40" viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8"?>
<rect x="20" y="10" width="120" height="20" rx="4" fill="#6b7280"/> <svg width="200" height="60" viewBox="0 0 200 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="80" y="25" font-family="Arial" font-size="14" fill="white" text-anchor="middle">Client One</text> <!-- Define gradient -->
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f9f9f9"/>
<stop offset="100%" style="stop-color:#f3f3f3"/>
</linearGradient>
</defs>
<!-- Light grey oval background with gradient -->
<ellipse cx="100" cy="30" rx="95" ry="28"
fill="url(#bgGradient)"/>
<!-- Text on top -->
<text x="50%" y="50%"
font-family="Arial, sans-serif"
font-size="22"
font-weight="500"
fill="#666666"
text-anchor="middle"
dominant-baseline="middle">
Customer Logo
</text>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 272 B

After

Width:  |  Height:  |  Size: 850 B