sonr/pkg/webapp/components/landing/lowlights.templ

package landing

import models "github.com/onsonr/sonr/pkg/webapp/models"

// ╭───────────────────────────────────────────────────────────╮
// │                         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:    models.Avatar0xDesigner.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "what if the wallet ui appeared next to the click instead of in a new browser window?",
		},
		{
			FullName: "Alex Recouso",
			Username: "@alexrecouso",
			Avatar: &models.Image{
				Src:    models.AvatarAlexRecouso.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "2024 resembles 1984, but it doesn't have to be that way for you",
		},
		{
			FullName: "Chjango Unchained",
			Username: "@chjango",
			Avatar: &models.Image{
				Src:    models.AvatarChjango.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "IBC is the inter-blockchain highway of @cosmos. While not very cypherpunk, charging a 1.5 basis pt fee would go a long way if priced in $ATOM.",
		},
		{
			FullName: "Gwart",
			Username: "@GwartyGwart",
			Avatar: &models.Image{
				Src:    models.AvatarGwart.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "	Base is incredible. Most centralized l2. Least details about their plans to decentralize. Keeps OP cabal quiet by pretending to care about quadratic voting and giving 10% tithe. Pays Ethereum mainnet virtually nothing. Runs yuppie granola ad campaigns.",
		},
	},
	LowerQuotes: []*models.Testimonial{
		{
			FullName: "winnie",
			Username: "@winnielaux_",
			Avatar: &models.Image{
				Src:    models.AvatarWinnieLaux.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "the ability to download apps directly from the web or from “crypto-only” app stores will be a massive unlock for web3",
		},
		{
			FullName: "Jelena",
			Username: "@jelena_noble",
			Avatar: &models.Image{
				Src:    models.AvatarJelenaNoble.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "Excited for all the @cosmos nerds to be vindicated in the next bull run",
		},
		{
			FullName: "accountless",
			Username: "@alexanderchopan",
			Avatar: &models.Image{
				Src:    models.AvatarAccountless.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "sounds like webThree. Single key pair Requires the same signer At risk of infinite approvals Public history of all transactions different account on each chain different addresses for each account",
		},
		{
			FullName: "Unusual Whales",
			Username: "@unusual_whales",
			Avatar: &models.Image{
				Src:    models.AvatarUnusualWhales.Src(),
				Width:  "44",
				Height: "44",
			},
			Quote: "BREAKING: Fidelity & Fidelity Investments has confirmed that over 77,000 customers had personal information compromised, including Social Security numbers and driver’s licenses.",
		},
	},
}

// ╭───────────────────────────────────────────────────────────╮
// │                  Render Section View                      │
// ╰───────────────────────────────────────────────────────────╯

// Lowlights is the (4th) home page lowlights section
templ Lowlights() {
	<section class="bg-zinc-800">
		<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">
						{ lowlights.Heading }
					</h2>
				</div>
			</div>
			<div class="max-w-[94rem] mx-auto space-y-6">
				<!-- Row #1 -->
				<div
					x-data="{}"
					x-init="$nextTick(() => {
                                let ul = $refs.testimonials;
                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
                                ul.nextSibling.setAttribute('aria-hidden', 'true');
                            })"
					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]">
						for _,quote := range lowlights.UpperQuotes {
							@quoteItem(quote)
						}
					</div>
				</div>
				<!-- Row #2 -->
				<div
					x-data="{}"
					x-init="$nextTick(() => {
                                let ul = $refs.testimonials;
                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
                                ul.nextSibling.setAttribute('aria-hidden', 'true');
                            })"
					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]">
						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>
}