diff --git a/app/page.tsx b/app/page.tsx index 3192dbb..817068a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useEffect, useRef, useState } from "react"; +import { ComparisonTable } from "@/components/ComparisonTable"; import Image from 'next/image'; import Link from 'next/link'; import type { CSSProperties } from 'react'; @@ -305,38 +306,7 @@ export default function Home() {

{tHome("whyTectonicDesc")}

-
- {features.map((f, i) => ( -
-
{ featureRefs.current[i] = el }} - style={{ transitionDelay: `${i * 120}ms` }} - className="relative rounded-xl border border-[#e7dac4] bg-[#fbf6ec] p-6 transform transition-all duration-700 opacity-0 translate-y-6 hover:-translate-y-1 hover:shadow-lg h-full" - > - {/* inner white panel for contrast */} -
-
- {f.emoji} -
- -

{f.title}

-

{f.desc}

- -
- {tHome("learnMoreLink")} -
- - - - - - - -
-
-
- ))} -
+
{tHome("learnMoreLink")} diff --git a/components/ComparisonTable.tsx b/components/ComparisonTable.tsx new file mode 100644 index 0000000..836228d --- /dev/null +++ b/components/ComparisonTable.tsx @@ -0,0 +1,198 @@ +"use client"; + +import React, { useState } from "react"; +import { useTranslations } from "@/lib/i18n"; + +export function ComparisonTable() { + const [hoveredCol, setHoveredCol] = useState(null); + const t = useTranslations("comparisonTable"); + + const columns = [ + t("columns.fiatBacked"), + t("columns.seigniorage"), + t("columns.cryptoCollateralized"), + t("columns.cryptoBacked"), + t("columns.tectonic"), + ]; + + const features = [ + { name: t("features.decentralization") + "1", scores: ["❌", "✅", "✅", "✅", "✅"] }, + { name: t("features.assetBacking") + "2", scores: ["✅", "❌3", "⚠️4", "✅", "✅"] }, + { name: t("features.lendingIndependence") + "5", scores: ["✅", "✅", "❌6", "✅", "✅"] }, + { name: t("features.transparency") + "7", scores: ["❌8", "✅", "✅", "✅", "✅"] }, + { name: t("features.redemptionRights") + "9", scores: ["⚠️10", "❌", "⚠️11", "✅", "✅"] }, + { name: t("features.leverage") + "12", scores: ["❌", "❌", "✅13", "✅14", "✅15"] }, + { name: t("features.minting") + "16", scores: ["⚠️17", "⚠️18", "✅", "⚠️19", "✅"] }, + { name: t("features.revenueSources") + "20", scores: [t("textScores.reserveAssetYield"), t("textScores.seigniorageFromNewCoin"), t("textScores.loanInterest"), t("textScores.mintingRedemptionFees"), t("textScores.mintingRedemptionStabilityFees")] }, + { name: t("features.revenueBeneficiaries") + "21", scores: [t("textScores.issuingCompany"), t("textScores.seigniorageShareHolders"), t("textScores.liquidators"), t("textScores.holdersOfTokenizedEquity"), t("textScores.holdersOfEquityCoins")] }, + { name: t("features.capitalEfficiency") + "22", scores: ["⭐⭐⭐⭐23", "⭐⭐⭐⭐⭐24", "⭐25", "⭐⭐26", "⭐⭐⭐27"] }, + { name: t("features.depegResilience") + "28", scores: ["⭐⭐29", "⭐30", "⭐⭐⭐⭐31", "⭐⭐⭐32", "⭐⭐⭐⭐⭐33"] }, + ]; + + const renderIcons = (str: string) => { + if (str === '✅') { + return ( + <> + {t("legend.yes")} + + + ); + } + if (str === '❌') { + return ( + <> + {t("legend.no")} + + + ); + } + if (str === '⚠️' || str === '\u26A0\uFE0F' || str === '\u26A0') { + return ( + <> + {t("legend.conditional")} + + + ); + } + if (str.includes('⭐')) { + const starCount = (str.match(/⭐/g) || []).length; + return ( + <> + {starCount} out of 5 stars + + + ); + } + return str; + }; + + const formatText = (text: string, colIndex: number = -1) => { + const match = text.match(/^(.*?)(\d+)$/); + if (match) { + const footnoteKey = match[2]; + const tooltipText = t(`footnotes.${footnoteKey}`); + + let tooltipPos = "left-1/2 -translate-x-1/2"; + let arrowPos = "left-1/2 -translate-x-1/2"; + + if (colIndex === 0) { + tooltipPos = "left-0"; + arrowPos = "left-4"; + } else if (colIndex >= 4) { + tooltipPos = "right-0"; + arrowPos = "right-4"; + } + + return ( + <> + {renderIcons(match[1])} + + + ); + } + return <>{renderIcons(text)}; + }; + + return ( +
+
+ + + + + {columns.map((col, i) => { + const isTectonic = i === columns.length - 1; + const isEvenCol = i % 2 === 0; + return ( + + ); + })} + + + + {features.map((feature, rowIndex) => { + const isLastRow = rowIndex === features.length - 1; + const rowBg = rowIndex % 2 === 0 ? "bg-white/40" : "bg-slate-50/30"; + + return ( + + + {feature.scores.map((score, colIndex) => { + const isTectonic = colIndex === columns.length - 1; + const isEvenCol = colIndex % 2 === 0; + + return ( + + ); + })} + + ); + })} + +
+ {t("legend.feature")} + setHoveredCol(i)} + onMouseLeave={() => setHoveredCol(null)} + className={`px-4 py-5 text-center text-[13px] font-bold leading-snug tracking-wide uppercase transition-all duration-300 ${ + isTectonic + ? `bg-[#FFC517] text-[#1a1a1a] border-x-2 border-t-2 border-[#e6b115] shadow-[0_-4px_12px_rgba(255,197,23,0.35)] rounded-t-xl relative z-20 ${hoveredCol === i ? 'scale-[1.02] shadow-[0_-8px_20px_rgba(255,197,23,0.45)]' : ''}` + : `text-amber-900 border-r border-b border-amber-300/80 ${ + hoveredCol === i ? "bg-amber-200 shadow-inner" : isEvenCol ? "bg-amber-100" : "bg-amber-50" + }` + }`} + > + {col} +
+ {formatText(feature.name, 0)} + setHoveredCol(colIndex)} + onMouseLeave={() => setHoveredCol(null)} + className={`px-4 py-5 text-sm text-center relative transition-all duration-300 ${ + isTectonic + ? `border-x-2 border-[#e6b115] text-slate-900 font-bold z-10 ${ + hoveredCol === colIndex ? "bg-[#FFC517]/30 shadow-[0_4px_25px_rgba(255,197,23,0.25)] scale-[1.02]" : "bg-[#FFC517]/15 shadow-[0_4px_15px_rgba(255,197,23,0.1)]" + } ${isLastRow ? "border-b-2 rounded-b-xl" : "border-b border-[#FFC517]/40"}` + : `text-slate-700 border-r border-slate-200 ${ + hoveredCol === colIndex ? "bg-amber-50/80" : isEvenCol ? "bg-slate-50/30" : "bg-transparent" + } ${isLastRow ? "border-b-0" : "border-b"}` + }`} + > + + {formatText(score, colIndex + 1)} + +
+
+
+ ); +} diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json index 94e2598..8b1af34 100644 --- a/lib/i18n/locales/en.json +++ b/lib/i18n/locales/en.json @@ -121,5 +121,80 @@ "resources": "Resources", "technicalPaper": "Technical Paper", "rights": "© 2026 Tectonic Protocol. All rights reserved." + }, + "comparisonTable": { + "columns": { + "fiatBacked": "Fiat-Backed", + "seigniorage": "Seigniorage-Share-Based", + "cryptoCollateralized": "Crypto-Collateralized", + "cryptoBacked": "Crypto-Backed", + "tectonic": "Tectonic" + }, + "features": { + "decentralization": "Decentralization", + "assetBacking": "Asset Backing", + "lendingIndependence": "Lending Independence", + "transparency": "Transparency", + "redemptionRights": "Redemption Rights", + "leverage": "Leverage", + "minting": "Minting", + "revenueSources": "Revenue Sources", + "revenueBeneficiaries": "Revenue Beneficiaries", + "capitalEfficiency": "Capital Efficiency", + "depegResilience": "Depeg Resilience" + }, + "textScores": { + "reserveAssetYield": "Reserve asset yield (e.g., treasury bills)", + "seigniorageFromNewCoin": "Seigniorage from new coin issuance above peg", + "loanInterest": "Loan interest and liquidation fees", + "mintingRedemptionFees": "Minting/redemption fees", + "mintingRedemptionStabilityFees": "Minting/redemption/stability fees", + "issuingCompany": "Issuing company", + "seigniorageShareHolders": "Seigniorage share holders", + "liquidators": "Liquidators", + "holdersOfTokenizedEquity": "Holders of Tokenized Equity", + "holdersOfEquityCoins": "Holders of EquityCoins" + }, + "footnotes": { + "1": "Decentralization: absence of a single controlling party over the protocol.", + "2": "Asset Backing: presence of assets that support the stablecoin's value.", + "3": "In contrast to popular misbeliefs, seigniorage-share based stablecoins are not backed by seigniorage shares.", + "4": "In contrast to popular misbeliefs, crypto-collateralized stablecoins are unbacked. The collateral is not a reserve. It is collateral for a loan that belongs to the borrower.", + "5": "Lending Independence: the stablecoin does not require an underlying loan or debt position to exist.", + "6": "A crypto-collateralized stablecoin is created only when a user opens a loan (CDP). Its existence directly depends on that debt position.", + "7": "Transparency: public visibility of reserves or positions.", + "8": "Knowing whether a fiat-backed stablecoin is sufficiently backed requires trusting the issuer or auditors.", + "9": "Redemption Rights: ability to exchange the stablecoin for underlying assets.", + "10": "Despite regulation requirements, fiat-backed stablecoin redemption at face value is usually limited to verified institutional partners. Retail users typically must rely on selling on open markets instead.", + "11": "A crypto-collateralized stablecoin is a loan note. Only the original borrower can redeem it directly for the locked collateral. Other holders can claim collateral only by bidding during a liquidation event. Otherwise, they must rely on selling on open markets.", + "12": "Leverage: ability to create a leveraged position using the model.", + "13": "Crypto-collateralized stablecoins support leveraged long positions only indirectly. The borrower mints stablecoins and sells them for more of the collateral asset.", + "14": "Crypto-backed stablecoins support leveraged long positions directly, through the minting of a separate coin that tokenizes the reserve surplus.", + "15": "Tectonic inherits the same direct leverage approach of crypto-backed stablecoins. But, thanks to its greater capital efficiency, it offers greater leverage.", + "16": "Minting: ability to mint new supply.", + "17": "Minting fiat-backed stablecoin for fiat at face value is usually limited to verified institutional partners. Retail users typically must rely on buying on open markets instead.", + "18": "Minting is only possible when the stablecoin's price is above the peg.", + "19": "Minting is disabled when the reserve ratio is below a threshold.", + "20": "Revenue Sources: where protocol income originates.", + "21": "Revenue Beneficiaries: who receives that income.", + "22": "Capital Efficiency: amount of stablecoin value created per unit of locked collateral.", + "23": "Fiat-backing stablecoins are very capital efficient because the reserve assets are presumably very stable and thus the issuing company can maintain a reserve ratio close to 100%.", + "24": "Seigniorage-share-based stablecoins are the most capital efficient of all because, being unbacked, they don't require capital at all.", + "25": "Crypto-collateralized stablecoins are the most capital inefficient because the collateral surplus must remain locked and idle.", + "26": "Crypto-backed stablecoins are more capital efficient than crypto-collateralized ones because their reserve surplus is tokenized and the reserve surplus tokens can be used freely and productively. Crypto-backed stablecoins are less capital efficient than fiat-backed stablecoins because their reserve assets are more volatile and thus a greater reserve ratio needs to be maintained in order to cushion against crashes in the reserve asset's price.", + "27": "Tectonic is more capital efficient than other crypto-backed stablecoins because its greater resilience against depegging allows it to maintain a lower reserve ratio.", + "28": "Depeg Resilience: ability of the model to prevent depegging or recover from depegging.", + "29": "Although depegging is unlikely because the reserve investments are supposed to be safe, these investments may still fail and cause the reserve ratio to drop below 100%. In such an event, recovery is unlikely.", + "30": "The Terra collapse shows that seigniorage-share-based stablecoins are unable to recover from depegging.", + "31": "The liquidation mechanism allows quick recovery of the collateral ratio if it becomes dangerously low. This indirectly protects the peg. Stablecoins of this kind have already successfully withstood several market crashes.", + "32": "Typical crypto-backed stablecoins maintain a large reserve ratio and are unlikely to depeg. Stablecoins of this kind have already successfully withstood several market crashes. However, if they depeg, recovery is difficult, to the lack of a liquidation-like mechanism. Recovery depends on recovery of the reserve asset or on the willingness of users to redeem stablecoins at discounted rates or to mint reserve surplus tokens at unfavorable prices.", + "33": "Tectonic triggers automatic redemptions for a random selection of users if the reserve ratio becomes dangerously low. This is a liquidation-like mechanism that directly protects the reserve ratio and the peg. However, unlike in liquidations, users receive exactly the amount of reserve assets that their stablecoins were worth, without any penalty." + }, + "legend": { + "yes": "Yes", + "no": "No", + "conditional": "Conditional or Limited", + "feature": "Feature" + } } -} +} \ No newline at end of file