Skip to content

Commit

Permalink
feat: css for trans
Browse files Browse the repository at this point in the history
  • Loading branch information
@Senna46
Senna46 committed Jun 27, 2024
1 parent 066cf47 commit 64f73f0
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 36 deletions.
12 changes: 6 additions & 6 deletions src/i18n/en.json
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
{
"app-description": "<b class='text-white'>Sunrise</b> is a specialized Data Availability Layer for Proof of Liquidity.",
"app-description": "<b>Sunrise</b> is a specialized Data Availability Layer for Proof of Liquidity.",
"sunrise-question": "Enhanced Liquidity for Everyone",
"sunrise-definition": "Building with Sunrise enables the advantages & benefits of an aligned liquidity & security model by extending the Proof of Liquidity flywheel to the DA level. This bootstraps liquidity for rollups, while providing a comprehensive solution for modular blockchain development.",
"sunrise-01": {
"label": "Monolithic blockchains can't scale.",
"description": "<div class='flex flex-col gap-2'><span class='text-white'>Monolithic chains are generalist blockchains that perform all tasks themselves. The monolithic approach is to “do everything yourself”.</span><span class='text-white'>This approach is expensive, not customizable, and not scalable. It’s extremely slow to build and deploy modern applications directly on monolithic chains. It’s an outdated formula, ready for disruption.</span></div>"
"description": "<div class='flex flex-col gap-2'><span>Monolithic chains are generalist blockchains that perform all tasks themselves. The monolithic approach is to “do everything yourself”.</span><span>This approach is expensive, not customizable, and not scalable. It’s extremely slow to build and deploy modern applications directly on monolithic chains. It’s an outdated formula, ready for disruption.</span></div>"
},
"sunrise-02": {
"label": "The modular paradigm is already here.",
"description": "<div class='flex flex-col gap-2'><span class='text-white'>A modular blockchain differs from a monolithic chain in that its four main functions can each be offloaded to a separate layer.</span><span class='text-white'>Sunrise is an example of a blockchain that specializes in fulfilling the function of data availability (“DA”) and consensus, while offloading the responsibility of execution and settlement to individual networks.</span><span class='text-white'>By using this structure, Modular Blockchains are more efficient, customizable, scalable, sovereign...</span></div>"
"description": "<div class='flex flex-col gap-2'><span>A modular blockchain differs from a monolithic chain in that its four main functions can each be offloaded to a separate layer.</span><span>Sunrise is an example of a blockchain that specializes in fulfilling the function of data availability (“DA”) and consensus, while offloading the responsibility of execution and settlement to individual networks.</span><span>By using this structure, Modular Blockchains are more efficient, customizable, scalable, sovereign...</span></div>"
},
"sunrise-03": {
"label": "Proof of Liquidity",
"description": "<div class='flex flex-col gap-2'><span class='text-white'>Sunrise provides a fast and secure data and consensus layer that gives you all you need to launch a sustainable modular blockchain.</span><span class='text-white'>Sunrise brings further innovation to the modular paradigm by integrating a novel mechanism: <b class='text-white'>Proof of Liquidity (PoL)</b>.</span><span class='text-white'>PoL on Sunrise is Modular Liquidity, resolving the liquidity issue faced by pre-existing modular infrastructure. Extending & replicating Berachain Proof of Liquidity across the entire DA Layer creates an aligned liquidity & security model identical to Berachain’s PoL flywheel, systematically building liquidity for both Sunrise and its users.</span><span class='text-white'>DA users on Sunrise can now directly engage in PoL on Sunrise to bootstrap liquidity and security for their rollup.</span></div>"
"description": "<div class='flex flex-col gap-2'><span>Sunrise provides a fast and secure data and consensus layer that gives you all you need to launch a sustainable modular blockchain.</span><span>Sunrise brings further innovation to the modular paradigm by integrating a novel mechanism: <b>Proof of Liquidity (PoL)</b>.</span><span>PoL on Sunrise is Modular Liquidity, resolving the liquidity issue faced by pre-existing modular infrastructure. Extending & replicating Berachain Proof of Liquidity across the entire DA Layer creates an aligned liquidity & security model identical to Berachain’s PoL flywheel, systematically building liquidity for both Sunrise and its users.</span><span>DA users on Sunrise can now directly engage in PoL on Sunrise to bootstrap liquidity and security for their rollup.</span></div>"
},
"sunrise-04": {
"label": "The unique value of Sunrise",
"description": "<div class='flex flex-col gap-2'><span class='text-white'>Integrating PoL at the DA Layer also enables <b class='text-white'>Fee Abstraction</b> on Sunrise.</span><span class='text-white'>While other DA layers charge fees in their native tokens, leading to a net-value extract to rollup developers, Sunrise instead can utilize any token.</span><span class='text-white'>Sunrise resolves singular token dependency by allowing anyone to engage in PoL in exchange for blobspace. Users can LP to any pool of their choice, including stable pools, settlement layer tokens, and bridged tokens through our cross-chain integrations. This allows Sunrise and Sunrise’s users to become secured by liquidity from many various ecosystems.</span><span class='text-white'>Together, these unique functions supercharge Data Availability for developers.</span></div>"
"description": "<div class='flex flex-col gap-2'><span>Integrating PoL at the DA Layer also enables <b>Fee Abstraction</b> on Sunrise.</span><span>While other DA layers charge fees in their native tokens, leading to a net-value extract to rollup developers, Sunrise instead can utilize any token.</span><span>Sunrise resolves singular token dependency by allowing anyone to engage in PoL in exchange for blobspace. Users can LP to any pool of their choice, including stable pools, settlement layer tokens, and bridged tokens through our cross-chain integrations. This allows Sunrise and Sunrise’s users to become secured by liquidity from many various ecosystems.</span><span>Together, these unique functions supercharge Data Availability for developers.</span></div>"
},
"sunrise-features": {
"label": "Build better blockchains, more easily and efficiently than ever before.",
Expand Down Expand Up @@ -51,7 +51,7 @@
},
"product-rollups": {
"label": "Sovereign Rollups",
"description": "A sovereign rollup is a type of blockchain that publishes its transactions to another blockchain, typically for ordering and <a href='https://celestia.org/glossary/data-availability' target='_blank'><u class='text-white'>data availability</u></a>, but handles its own <a href='https://celestia.org/learn/modular-settlement-layers/settlement-in-the-modular-stack' target='_blank'><u class='text-white'>settlement</u></a>.<br />Sovereign rollups are responsible for execution and settlement, while the DA layer handles consensus and data availability."
"description": "A sovereign rollup is a type of blockchain that publishes its transactions to another blockchain, typically for ordering and <a href='https://celestia.org/glossary/data-availability' target='_blank'><u>data availability</u></a>, but handles its own <a href='https://celestia.org/learn/modular-settlement-layers/settlement-in-the-modular-stack' target='_blank'><u>settlement</u></a>.<br />Sovereign rollups are responsible for execution and settlement, while the DA layer handles consensus and data availability."
},
"product-pol": {
"label": "Sovereign Proof of Liquidity",
Expand Down
8 changes: 3 additions & 5 deletions src/lib/components/Concept.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,17 @@
<div>
<div class="flex flex-col justify-center pt-8 sm:pt-[60px] sm:pb-16 pb-5 gap-3">
<Label
className="text-center text-white font-orbitron xl:text-[64px] md:text-[40px] sm:text-[30px] text-lg font-bold tracking-wider"
className="text-center font-orbitron xl:text-[64px] md:text-[40px] sm:text-[30px] text-lg font-bold tracking-wider"
text={$_('sunrise-question')}
/>
<Label
className="text-center text-white font-overpass md:text-[26px] text-xs font-medium sm:leading-[25px] tracking-wide max-w-[800px] mx-auto whitespace-pre-wrap sm:pt-8"
className="text-center font-overpass md:text-[26px] text-xs font-medium sm:leading-[25px] tracking-wide max-w-[800px] mx-auto whitespace-pre-wrap sm:pt-8"
text={$_('sunrise-definition')}
/>
</div>
</div>
<!-- <div class="flex flex-col sm:flex-row gap-y-9 sm:flex-wrap sm:justify-between pb-16"> -->
<div
class="flex flex-col sm:flex-row gap-4 sm:flex-wrap pb-16"
>
<div class="flex flex-col sm:flex-row gap-4 sm:flex-wrap pb-16">
{#each features as { index, label, description, imageSrc }, i}
<FeatureItem {index} {label} {description} {imageSrc} />
{/each}
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/Summary.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@
src={item.image}
alt={item.name}
/>
<div class="card-body">
<h2 class="card-title text-2xl font-sans text-white">
<div class="card-body text-base-100">
<h2 class="card-title text-2xl font-sans">
{$_(item.label)}
</h2>
<p class="text-white font-sans text-xs sm:text-sm md:text-base">
<p class=" font-sans text-xs sm:text-sm md:text-base">
{@html $_(item.description)}
</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/lib/ui/FeatureItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,16 @@
style="background: var(--Dark, linear-gradient(180deg, rgba(15, 28, 54, 0.30) 0%, #0A204A 100%))"
>
<Label
className="font-orbitron 2xl:text-3xl lg:text-2xl sm:text-xl font-extrabold tracking-widest text-white"
className="font-orbitron 2xl:text-3xl lg:text-2xl sm:text-xl font-extrabold tracking-widest "
text={$_(index)}
/>
<Label
className="font-orbitron 2xl:text-3xl lg:text-2xl sm:text-xl font-extrabold tracking-widest text-white"
className="font-orbitron 2xl:text-3xl lg:text-2xl sm:text-xl font-extrabold tracking-widest "
text={$_(label)}
/>
<img class="md:w-full w-[60%] max-w-60 mx-auto max-h-60" src={imageSrc} alt={label} />
<Label
className="font-sans font-normal text-white whitespace-pre-wrap sm:text-base text-xs"
className="font-sans font-normal whitespace-pre-wrap sm:text-base text-xs"
text={$_(description)}
/>
</div>
14 changes: 5 additions & 9 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,19 @@
</svelte:head>

<main>
<section class="z-20 mx-auto max-w-screen-xl gap-8 md:my-20">
<h1
class="text-center font-orbitron text-4xl font-extrabold text-white md:text-5xl xl:text-6xl"
>
<section class="z-20 mx-auto max-w-screen-xl gap-8 md:my-20 text-base-100">
<h1 class="text-center font-orbitron text-4xl font-extrabold md:text-5xl xl:text-6xl">
{@html appDescription}
</h1>
<h2 class="md:text:xl text-center font-overpass text-white sm:text-lg xl:text-2xl">
<h2 class="md:text:xl text-center font-overpass sm:text-lg xl:text-2xl">
{@html $_('app-description')}
</h2>
<div class="flex gap-4 my-8">
<button
class="btn btn-disabled btn-sm md:btn-md lg:btn-lg font-overpass text-blue-600 lg:text-xl"
>
<button class="btn btn-sm md:btn-md lg:btn-lg font-overpass text-blue-600 lg:text-xl">
<a href="https://testnet.app.sunriselayer.io" target="_blank">Try our Testnet</a>
</button>
<button
class="btn btn-sm md:btn-md lg:btn-lg btn-outline font-overpass text-white lg:text-xl"
class="btn btn-sm md:btn-md lg:btn-lg btn-outline font-overpass text-base-100 lg:text-xl"
>
<a href="https://docs.sunriselayer.io/run-a-sunrise-node/networks" target="_blank">
Build on Sunrise
Expand Down
14 changes: 5 additions & 9 deletions src/routes/Concepts.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,11 @@
</script>

<main>
<section class="z-20 mx-auto max-w-screen-xl gap-8 md:my-20">
<h1
class="text-center font-orbitron text-4xl font-extrabold text-white md:text-5xl xl:text-6xl"
>
<section class="z-20 mx-auto max-w-screen-xl gap-8 md:my-20 text-base-100">
<h1 class="text-center font-orbitron text-4xl font-extrabold md:text-5xl xl:text-6xl">
{@html $_('sunrise-question')}
</h1>
<h2 class="md:text:xl text-center font-overpass text-white text-sm sm:text-lg xl:text-2xl">
<h2 class="md:text:xl text-center font-overpass text-sm sm:text-lg xl:text-2xl">
{@html $_('sunrise-definition')}
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
Expand All @@ -47,17 +45,15 @@
style="background: var(--Dark, linear-gradient(180deg, rgba(15, 28, 54, 0.30) 0%, #0A204A 100%))"
>
<div class="card-body">
<h2
class="card-title md:text-2xl font-orbitron font-extrabold text-white tracking-widest"
>
<h2 class="card-title md:text-2xl font-orbitron font-extrabold tracking-widest">
{$_(index)} <br />
{$_(label)}
</h2>

<figure>
<img class="max-w-60 max-h-60 mx-auto" src={imageSrc} alt={label} />
</figure>
<p class="font-sans text-white text-xs sm:text-sm md:text-base">
<p class="font-sans text-xs sm:text-sm md:text-base">
{@html $_(description)}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</div>
<div class="ibm-plex-sans flex flex-col gap-1">
<Label className="md:text-xl font-bold text-lg text-slate-500" text="Services" />
<Label className="md:text-base text-xs font-medium" text="Portal (coming soon)" />
<Label className="md:text-base text-xs font-medium" text="App (coming soon)" />
<Label className="md:text-base text-xs font-medium" text="Explorer (coming soon)" />
</div>
<div class="ibm-plex-sans flex flex-col gap-1">
Expand Down

0 comments on commit 64f73f0

Please sign in to comment.