mirror of
https://github.com/onsonr/sonr.git
synced 2025-03-10 13:07:09 +00:00
feat: add avatar image components
This commit is contained in:
parent
de4d62e63e
commit
006f69e0d2
@ -38,7 +38,7 @@ type Technology struct {
|
||||
type Testimonial struct {
|
||||
FullName string
|
||||
Username string
|
||||
Avatar string
|
||||
Avatar *Image
|
||||
Quote string
|
||||
}
|
||||
|
||||
@ -85,7 +85,8 @@ type Architecture struct {
|
||||
|
||||
type Lowlights struct {
|
||||
Heading string
|
||||
Quotes []*Testimonial
|
||||
UpperQuotes []*Testimonial
|
||||
LowerQuotes []*Testimonial
|
||||
}
|
||||
|
||||
type CallToAction struct {
|
||||
|
||||
@ -1,9 +1,101 @@
|
||||
package sections
|
||||
|
||||
import (
|
||||
models "github.com/onsonr/sonr/internal/orm/marketing"
|
||||
)
|
||||
|
||||
// ╭───────────────────────────────────────────────────────────╮
|
||||
// │ Data Model │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
|
||||
var lowlights = &models.Lowlights{
|
||||
Heading: "The Fragmentation Problem in the Existing Web is seeping into Crypto",
|
||||
UpperQuotes: []*models.Testimonial{
|
||||
{
|
||||
FullName: "0xDesigner",
|
||||
Username: "@0xdesigner",
|
||||
Avatar: &models.Image{
|
||||
Src: Avatar0xDesigner.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
{
|
||||
FullName: "Alex Recouso",
|
||||
Username: "@alexrecouso",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarAlexRecouso.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
{
|
||||
FullName: "Chjango",
|
||||
Username: "@chjango",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarChjango.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
{
|
||||
FullName: "Gwart",
|
||||
Username: "@gwart",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarGwart.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
},
|
||||
LowerQuotes: []*models.Testimonial{
|
||||
{
|
||||
FullName: "HTMX Org",
|
||||
Username: "@htmx_org",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarHTMXOrg.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
{
|
||||
FullName: "Jelena Noble",
|
||||
Username: "@jelena_noble",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarJelenaNoble.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
{
|
||||
FullName: "Tanish",
|
||||
Username: "@tanishqxyz",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarTanishqXYZ.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
{
|
||||
FullName: "Unusual Whales",
|
||||
Username: "@unusual_whales",
|
||||
Avatar: &models.Image{
|
||||
Src: AvatarUnusualWhales.Src(),
|
||||
Width: "44",
|
||||
Height: "44",
|
||||
},
|
||||
Quote: "Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.",
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// ╭───────────────────────────────────────────────────────────╮
|
||||
// │ Render Section View │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
@ -14,7 +106,9 @@ templ Lowlights() {
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-20">
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-200">The Fragmentation Problem in the Existing Web is seeping into Crypto</h2>
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-200">
|
||||
{ lowlights.Heading }
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[94rem] mx-auto space-y-6">
|
||||
@ -29,66 +123,9 @@ templ Lowlights() {
|
||||
class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
|
||||
>
|
||||
<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll group-hover:[animation-play-state:paused]">
|
||||
<!-- Item #1 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-01.jpg" width="44" height="44" alt="Testimonial 01"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Lina James</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">linaj87</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item #2 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-02.jpg" width="44" height="44" alt="Testimonial 02"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Sarah Mendes</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">saramendes</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item #3 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-03.jpg" width="44" height="44" alt="Testimonial 03"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Michał Rutt</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">michrutt</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item #4 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-04.jpg" width="44" height="44" alt="Testimonial 04"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Mary Kahl</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">marykahl</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
for _,quote := range lowlights.UpperQuotes {
|
||||
@quoteItem(quote)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row #2 -->
|
||||
@ -102,69 +139,29 @@ templ Lowlights() {
|
||||
class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
|
||||
>
|
||||
<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll-inverse group-hover:[animation-play-state:paused] [animation-delay:-7.5s]">
|
||||
<!-- Item #5 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-05.jpg" width="44" height="44" alt="Testimonial 05"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Katy Dragán</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">katyd</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item #6 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-06.jpg" width="44" height="44" alt="Testimonial 06"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Karl Ahmed</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">karl87</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item #7 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-07.jpg" width="44" height="44" alt="Testimonial 07"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Carlotta Grech</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">carlagrech</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item #8 -->
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-08.jpg" width="44" height="44" alt="Testimonial 08"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">Alejandra Gok</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">alejandraIT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
|
||||
</div>
|
||||
</div>
|
||||
for _,quote := range lowlights.LowerQuotes {
|
||||
@quoteItem(quote)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ quoteItem(quote *models.Testimonial) {
|
||||
<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="shrink-0 rounded-full mr-3" src={ quote.Avatar.Src } width={ quote.Avatar.Width } height={ quote.Avatar.Height } alt="Testimonial 01"/>
|
||||
<div>
|
||||
<div class="font-inter-tight font-bold text-zinc-200">{ quote.FullName }</div>
|
||||
<div>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">{ quote.Username }</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
|
||||
{ quote.Quote }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,6 +2,29 @@ package sections
|
||||
|
||||
import "fmt"
|
||||
|
||||
// ╭───────────────────────────────────────────────────────────╮
|
||||
// │ Avatar Image Components │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
|
||||
type Avatar string
|
||||
|
||||
const (
|
||||
Avatar0xDesigner Avatar = "0xdesigner.jpg"
|
||||
AvatarAlexRecouso Avatar = "alexrecouso.jpg"
|
||||
AvatarChjango Avatar = "chjango.jpg"
|
||||
AvatarGwart Avatar = "gwart.jpg"
|
||||
AvatarHTMXOrg Avatar = "htmx_org.jpg"
|
||||
AvatarJelenaNoble Avatar = "jelena_noble.jpg"
|
||||
AvatarSonr Avatar = "sonr.svg"
|
||||
AvatarTanishqXYZ Avatar = "tanishqxyz.jpg"
|
||||
AvatarUnusualWhales Avatar = "unusual_whales.png"
|
||||
AvatarWinnieLaux Avatar = "winnielaux_.jpg"
|
||||
)
|
||||
|
||||
func (a Avatar) Src() string {
|
||||
return fmt.Sprintf("https://cdn.sonr.id/img/avatars/%s", string(a))
|
||||
}
|
||||
|
||||
// ╭───────────────────────────────────────────────────────────╮
|
||||
// │ SVG CDN Illustrations │
|
||||
// ╰───────────────────────────────────────────────────────────╯
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user