Skip to content

Commit

Permalink
Removed explore your options section on wit page
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabros20
gabros20 committed Jan 27, 2025
1 parent 8b8907a commit ef2cf24
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 145 deletions.
268 changes: 124 additions & 144 deletions src/app/what-is-tia/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,163 +4,143 @@ import { Col, Row } from "@/macros/Grids";
import { Display, Body } from "@/macros/Copy";
import VerticalTitleCard from "@/components/Cards/VerticalTitleCards/VerticalTitleCard";
import ProjectFilter from "@/components/ProjectFilter/ProjectFilter";
import GetInTouch from "@/components/CallToActions/GetInTouch";
import { getFilterOptions } from "@/utils/getFilterOptions";

import meta from "@/components/Meta/Meta";
import seo from "@/data/what-is-tia/seo";

export const metadata = meta(seo);

const role = {
title: "TIA's role in Celestia",
items: [
{
id: 1,
title: "Create a wallet",
description: "Create a wallet with celestia node.",
url: "https://docs.celestia.org/how-to-guides/celestia-app-wallet",
},
{
id: 1,
title: "Pay for blobspace",
description:
"Rollups pay to publish data to Celestia’s blobspace using TIA.",
url: "https://docs.celestia.org/learn/paying-for-blobspace/",
},
{
id: 2,
title: "Secure the network",
description:
"Users stake TIA to participate in consensus and secure Celestia.",
url: "https://docs.celestia.org/learn/tia/",
},
{
id: 3,
title: "Gas token for rollups",
description: "Developers can use TIA as a gas token for their rollups.",
url: null,
},
],
title: "TIA's role in Celestia",
items: [
{
id: 1,
title: "Create a wallet",
description: "Create a wallet with celestia node.",
url: "https://docs.celestia.org/how-to-guides/celestia-app-wallet",
},
{
id: 1,
title: "Pay for blobspace",
description: "Rollups pay to publish data to Celestia’s blobspace using TIA.",
url: "https://docs.celestia.org/learn/paying-for-blobspace/",
},
{
id: 2,
title: "Secure the network",
description: "Users stake TIA to participate in consensus and secure Celestia.",
url: "https://docs.celestia.org/learn/tia/",
},
{
id: 3,
title: "Gas token for rollups",
description: "Developers can use TIA as a gas token for their rollups.",
url: null,
},
],
};

const wallets = {
title: "Wallets",
details: "",
items: [
{
title: "Keplr Wallet",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/kepler-icon.jpg",
url: "https://www.keplr.app/",
},
{
title: "Cosmostation",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/cosmostation-icon.jpg",
url: "https://cosmostation.io/products/cosmostation_extension/",
},
{
title: "Leap",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/leap-icon.jpg",
url: "https://www.leapwallet.io/",
},
{
title: "Ledger",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/ledger-icon.jpg",
url: "https://www.ledger.com/",
},
],
title: "Wallets",
details: "",
items: [
{
title: "Keplr Wallet",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/kepler-icon.jpg",
url: "https://www.keplr.app/",
},
{
title: "Cosmostation",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/cosmostation-icon.jpg",
url: "https://cosmostation.io/products/cosmostation_extension/",
},
{
title: "Leap",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/leap-icon.jpg",
url: "https://www.leapwallet.io/",
},
{
title: "Ledger",
categories: ["IOS", "Android", "Desktop"],
image: "/images/app/what-is-tia/ledger-icon.jpg",
url: "https://www.ledger.com/",
},
],
};

export default async function WhatIsTia() {
return (
<>
<SecondaryHero
title={"What is TIA?"}
subtitle={
"Learn about TIA, the native token of the Celestia blockchain."
}
buttons={[
{
text: "Pay for Data",
url: "https://docs.celestia.org/how-to-guides/submit-data",
iconDirection: "up-right",
},
{
text: "Stake TIA",
url: "/what-is-tia#projects",
iconDirection: "down-right",
},
]}
videos={{
src: {
xl: "/videos/hero/tia-desktop_xl.mp4",
lg: "/videos/hero/tia-desktop_lg.mp4",
sm: "/videos/hero/tia-mobile_sm.mp4",
},
poster: {
lg: "/videos/hero/tia-desktop_xl_poster.jpg",
sm: "/videos/hero/tia-mobile_sm_poster.jpg",
},
}}
/>
return (
<>
<SecondaryHero
title={"What is TIA?"}
subtitle={"Learn about TIA, the native token of the Celestia blockchain."}
buttons={[
{
text: "Pay for Data",
url: "https://docs.celestia.org/how-to-guides/submit-data",
iconDirection: "up-right",
},
{
text: "Stake TIA",
url: "/what-is-tia#projects",
iconDirection: "down-right",
},
]}
videos={{
src: {
xl: "/videos/hero/tia-desktop_xl.mp4",
lg: "/videos/hero/tia-desktop_lg.mp4",
sm: "/videos/hero/tia-mobile_sm.mp4",
},
poster: {
lg: "/videos/hero/tia-desktop_xl_poster.jpg",
sm: "/videos/hero/tia-mobile_sm_poster.jpg",
},
}}
/>

<section className="text-white bg-black">
<Container size={"lg"} className={"py-10 lg:py-24"}>
<Row className={"mb-6 lg:mb-16"}>
<Col width={60}>
<Display size={"sm"} tag={"h2"} className={"mb-4 lg:mb-0"}>
The role of TIA in Celestia
</Display>
</Col>
<Col width={40}>
<Body size={"md"}></Body>
</Col>
</Row>
<Row>
<Col width={100}>
<div
className={`w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-4`}
>
{role.items.map((card, index) => (
<VerticalTitleCard
dark
key={index}
title={card.title}
description={card.description}
url={card.url}
/>
))}
</div>
</Col>
</Row>
</Container>
</section>
<section className='text-white bg-black'>
<Container size={"lg"} className={"py-10 lg:py-24"}>
<Row className={"mb-6 lg:mb-16"}>
<Col width={60}>
<Display size={"sm"} tag={"h2"} className={"mb-4 lg:mb-0"}>
The role of TIA in Celestia
</Display>
</Col>
<Col width={40}>
<Body size={"md"}></Body>
</Col>
</Row>
<Row>
<Col width={100}>
<div className={`w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-4`}>
{role.items.map((card, index) => (
<VerticalTitleCard dark key={index} title={card.title} description={card.description} url={card.url} />
))}
</div>
</Col>
</Row>
</Container>
</section>

<div id="projects">
<ProjectFilter
title={"Wallets"}
description={
<>
Anyone can download a non-custodial wallet to freely control and
use their TIA.
<br />
<br />
It’s important to get familiar with basic wallet practices for
safely storing and transacting with TIA on Celestia.
</>
}
// filters={getFilterOptions(wallets.items, "categories")}
// filterTarget={"categories"}
items={wallets.items}
showCategoriesOnCard
/>
</div>

<GetInTouch />
</>
);
<div id='projects'>
<ProjectFilter
title={"Wallets"}
description={
<>
Anyone can download a non-custodial wallet to freely control and use their TIA.
<br />
<br />
It’s important to get familiar with basic wallet practices for safely storing and transacting with TIA on Celestia.
</>
}
items={wallets.items}
showCategoriesOnCard
/>
</div>
</>
);
}
2 changes: 1 addition & 1 deletion src/components/ProjectFilter/ProjectFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const ProjectFilter = ({ id, title, description, filters, filterTarget, filtersT
</div>
</Sticky>
</Col>
<Col width={60} className='pb-10 lg:py-20'>
<Col width={60} className='pt-6 pb-10 lg:py-20'>
<AnimatePresence>
{filteredProjects.map((item, index) => (
<ProjectCard
Expand Down

0 comments on commit ef2cf24

Please sign in to comment.