From de4d62e63e0cd4a431d475d1d1ee00dd3a6468c2 Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Mon, 4 Nov 2024 10:08:06 -0500 Subject: [PATCH] feat: add SVG CDN Illustrations to marketing architecture --- .../marketing/sections/architecture.templ | 43 ++++- .../marketing/sections/architecture_templ.go | 156 ++++++++++++++---- .../components/marketing/sections/utils.go | 46 ++++++ 3 files changed, 203 insertions(+), 42 deletions(-) create mode 100644 pkg/nebula/components/marketing/sections/utils.go diff --git a/pkg/nebula/components/marketing/sections/architecture.templ b/pkg/nebula/components/marketing/sections/architecture.templ index 8a05d5d9f..3855f0825 100644 --- a/pkg/nebula/components/marketing/sections/architecture.templ +++ b/pkg/nebula/components/marketing/sections/architecture.templ @@ -13,22 +13,47 @@ var arch = &models.Architecture{ Primary: &models.Technology{ Title: "Decentralized Identity", Desc: "Sonr leverages the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.", + Image: &models.Image{ + Src: HardwareWallet.Src(), + Width: "721", + Height: "280", + }, }, Secondary: &models.Technology{ Title: "IPFS Vaults", Desc: "Completely distributed, encrypted, and decentralized storage for your data.", + Image: &models.Image{ + Src: DecentralizedNetwork.Src(), + Width: "342", + Height: "280", + }, }, Tertiary: &models.Technology{ Title: "Service Records", Desc: "On-chain validated services created by Developers for secure transmission of user data.", + Image: &models.Image{ + Src: DefiDashboard.Src(), + Width: "342", + Height: "280", + }, }, Quaternary: &models.Technology{ - Title: "Authentication & Authorization", - Desc: "Sonr leverages decentralized Macaroons and Multi-Party Computation to provide a secure and decentralized authentication and authorization system.", - }, - Quinary: &models.Technology{ Title: "First-Class Exchange", Desc: "Sonr integrates with the IBC protocol allowing for seamless integration with popular exchanges such as OKX, Binance, and Osmosis.", + Image: &models.Image{ + Src: PortfolioBalance.Src(), + Width: "342", + Height: "280", + }, + }, + Quinary: &models.Technology{ + Title: "Authentication & Authorization", + Desc: "Sonr leverages decentralized Macaroons and Multi-Party Computation to provide a secure and decentralized authentication and authorization system.", + Image: &models.Image{ + Src: DecentralizedWebNode.Src(), + Width: "342", + Height: "280", + }, }, } @@ -83,7 +108,7 @@ templ Architecture() {
Feature Post 01 Feature Post 02 Feature Post 03 Feature Post 04 Feature Post 05
\"Feature

") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" width=\"721\" height=\"280\" alt=\"Feature Post 01\">

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var7 string - templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Secondary.Desc) + templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Secondary.Title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 113, Col: 29} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 134, Col: 31} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature

") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var8 string - templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Tertiary.Title) + templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Secondary.Desc) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 142, Col: 30} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 138, Col: 29} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature

") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" width=\"342\" height=\"280\" alt=\"Feature Post 02\">

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var10 string - templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quaternary.Title) + templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Tertiary.Title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 175, Col: 32} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 167, Col: 30} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10)) if templ_7745c5c3_Err != nil { @@ -188,41 +213,106 @@ func Architecture() templ.Component { return templ_7745c5c3_Err } var templ_7745c5c3_Var11 string - templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quaternary.Desc) + templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Tertiary.Desc) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 179, Col: 30} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 171, Col: 28} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature

") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var13 string + templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quaternary.Title) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 200, Col: 32} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var13 string - templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quinary.Desc) + var templ_7745c5c3_Var14 string + templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quaternary.Desc) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 212, Col: 27} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 204, Col: 30} } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature
") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var16 string + templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quinary.Title) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 233, Col: 29} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var17 string + templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quinary.Desc) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 237, Col: 27} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

\"Feature
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/pkg/nebula/components/marketing/sections/utils.go b/pkg/nebula/components/marketing/sections/utils.go new file mode 100644 index 000000000..c1ee3d6ce --- /dev/null +++ b/pkg/nebula/components/marketing/sections/utils.go @@ -0,0 +1,46 @@ +package sections + +import "fmt" + +// ╭───────────────────────────────────────────────────────────╮ +// │ SVG CDN Illustrations │ +// ╰───────────────────────────────────────────────────────────╯ + +type Illustration string + +const ( + BlockchainExplorer Illustration = "blockchain-explorer" + BlockchainStructure Illustration = "blockchain-structure" + CrossChainBridge Illustration = "cross-chain-bridge" + CrossChainTransfer Illustration = "cross-chain-transfer" + CryptoAirdrop Illustration = "crypto-airdrop" + CryptoCard Illustration = "crypto-card" + CryptoExchange Illustration = "crypto-exchange" + CryptoMining Illustration = "crypto-mining" + CryptoPayments Illustration = "crypto-payments" + CryptoSecurity Illustration = "crypto-security" + CryptoStaking Illustration = "crypto-staking" + CryptoYield Illustration = "crypto-yield" + CurrencyConversion Illustration = "currency-conversion" + DecentralizedNetwork Illustration = "decentralized-network" + DecentralizedWebNode Illustration = "decentralized-web-node" + DefiDashboard Illustration = "defi-dashboard" + GovernanceToken Illustration = "governance-token" + HardwareWallet Illustration = "hardware-wallet" + InitialCoinOffering Illustration = "initial-coin-offering" + LiquidityPool Illustration = "liquidity-pool" + MarketAnalysis Illustration = "market-analysis" + MarketVolatility Illustration = "market-volatility" + MultiCoinWallet Illustration = "multi-coin-wallet" + NetworkLatency Illustration = "network-latency" + PortfolioBalance Illustration = "portfolio-balance" + PrivateKey Illustration = "private-key" + ProofOfStake Illustration = "proof-of-stake" + TokenFractioning Illustration = "token-fractioning" + TokenMinting Illustration = "token-minting" + TokenSwap Illustration = "token-swap" +) + +func (i Illustration) Src() string { + return fmt.Sprintf("https://cdn.sonr.id/img/illustrations/%s.svg", string(i)) +}