From 0143cf26aab7e68762483a8f9792baef935cb04a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Tam=C3=A1s?= Date: Thu, 30 Jan 2025 13:35:09 +0100 Subject: [PATCH 1/2] Updated font for light node --- src/app/run-a-light-node/page.js | 351 ++++++++++++++----------------- 1 file changed, 160 insertions(+), 191 deletions(-) diff --git a/src/app/run-a-light-node/page.js b/src/app/run-a-light-node/page.js index dd8fba6c..2b3eeb80 100644 --- a/src/app/run-a-light-node/page.js +++ b/src/app/run-a-light-node/page.js @@ -14,200 +14,169 @@ import seo from "@/data/run-a-light-node/seo"; export const metadata = meta(seo); export default async function RunALightNode() { - const networkGroups = [ - { - cards: [ - { - title: "Beginner", - description: "Run a light node in your browser with Lumina.", - url: "https://lumina.rs", - }, - { - title: "Intermediate", - description: "Power up a light node in under 3 minutes with Docker.", - url: "https://docs.celestia.org/how-to-guides/docker-images", - }, - { - title: "Advanced", - description: "Start a light node with the command line.", - url: "https://docs.celestia.org/how-to-guides/light-node", - }, - ], - }, - ]; + const networkGroups = [ + { + cards: [ + { + title: "Beginner", + description: "Run a light node in your browser with Lumina.", + url: "https://lumina.rs", + }, + { + title: "Intermediate", + description: "Power up a light node in under 3 minutes with Docker.", + url: "https://docs.celestia.org/how-to-guides/docker-images", + }, + { + title: "Advanced", + description: "Start a light node with the command line.", + url: "https://docs.celestia.org/how-to-guides/light-node", + }, + ], + }, + ]; - const developerGroups = [ - { - cards: [ - { - title: "Publish data", - description: "Publish transaction data to Celestia’s DA network.", - url: "https://docs.celestia.org/developers/node-tutorial", - }, - { - title: "Retrieve data", - description: "Retrieve transaction data from Celestia’s DA network.", - url: "https://docs.celestia.org/developers/node-tutorial#retrieving-data", - }, - { - title: "Manage Tia wallet", - description: - "Generate a Celestia wallet to store Tia and pay for publishing transaction data to Celestia.", - url: "https://docs.celestia.org/developers/celestia-node-key", - }, - ], - }, - ]; + const developerGroups = [ + { + cards: [ + { + title: "Publish data", + description: "Publish transaction data to Celestia’s DA network.", + url: "https://docs.celestia.org/developers/node-tutorial", + }, + { + title: "Retrieve data", + description: "Retrieve transaction data from Celestia’s DA network.", + url: "https://docs.celestia.org/developers/node-tutorial#retrieving-data", + }, + { + title: "Manage Tia wallet", + description: "Generate a Celestia wallet to store Tia and pay for publishing transaction data to Celestia.", + url: "https://docs.celestia.org/developers/celestia-node-key", + }, + ], + }, + ]; - return ( - <> - + return ( + <> + -
- -
-
- - What is a light node? - - - Light nodes allow anyone to directly verify data availability - and interact with Celestia without centralized gateways or RPC - providers. - - - Data availability sampling enables Celestia to securely increase - throughput for rollups as new light nodes join the network over - time. - - - Each rollup on Celestia uses a light node to directly publish - and retrieve transaction data. - -
-
- -
+
+ +
+
+ + What is a light node? + + + Light nodes allow anyone to directly verify data availability and interact with Celestia without centralized gateways + or RPC providers. + + + Data availability sampling enables Celestia to securely increase throughput for rollups as new light nodes join the + network over time. + + + Each rollup on Celestia uses a light node to directly publish and retrieve transaction data. + +
+
+ +
-
- - - - - Join the network - - - - - - - {networkGroups.map((group, index) => ( -
- {group.cards.map((card, index) => ( - - ))} -
- ))} - - - -
+
+ + + + + Join the network + + + + + + + {networkGroups.map((group, index) => ( +
+ {group.cards.map((card, index) => ( + + ))} +
+ ))} + + + +
-
- - - - - Light nodes for developers - - - How developers can use a Celestia light node for their chain - - - - -
- Start light node - } - hover - HoverIcon={} - className={`flex-grow-0`} - direction="up-right" - border={false} - size={"xs"} - transparentBg - /> -
- - - - - - {developerGroups.map((group, index) => ( -
- {group.cards.map((card, index) => ( - - ))} -
- ))} - - - -
-
- - ); +
+ + + + + Light nodes for developers + + + How developers can use a Celestia light node for their chain + + + + +
+ Start light node + } + hover + HoverIcon={} + className={`flex-grow-0`} + direction='up-right' + border={false} + size={"xs"} + transparentBg + /> +
+ + + + + + {developerGroups.map((group, index) => ( +
+ {group.cards.map((card, index) => ( + + ))} +
+ ))} + + + +
+
+ + ); } From c602229b6da55b8aa8704c4610207f5ad26ef615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Tam=C3=A1s?= Date: Mon, 3 Feb 2025 16:16:44 +0100 Subject: [PATCH 2/2] FIxed font style conflicts --- src/app/run-a-light-node/page.js | 14 +- src/components/AppsCarousel/AppsCarousel.js | 148 ++++++++++++++++++++ 2 files changed, 155 insertions(+), 7 deletions(-) create mode 100644 src/components/AppsCarousel/AppsCarousel.js diff --git a/src/app/run-a-light-node/page.js b/src/app/run-a-light-node/page.js index 2b3eeb80..8c6c2fa0 100644 --- a/src/app/run-a-light-node/page.js +++ b/src/app/run-a-light-node/page.js @@ -1,10 +1,10 @@ import SecondaryHero from "@/components/Heroes/SecondaryHero"; // import Introduction from "@/components/Introduction/Introduction"; -import Container from "@/components/Container/Container"; -import { Col, Row } from "@/macros/Grids"; -import { Display, Body, Heading } from "@/macros/Copy"; import VerticalTitleCard from "@/components/Cards/VerticalTitleCards/VerticalTitleCard"; +import Container from "@/components/Container/Container"; import PrimaryButton from "@/macros/Buttons/PrimaryButton"; +import { Body, Display, Heading } from "@/macros/Copy"; +import { Col, Row } from "@/macros/Grids"; import Icon from "@/macros/Icons/Icon"; import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG"; @@ -91,18 +91,18 @@ export default async function RunALightNode() {
- + What is a light node? - + Light nodes allow anyone to directly verify data availability and interact with Celestia without centralized gateways or RPC providers. - + Data availability sampling enables Celestia to securely increase throughput for rollups as new light nodes join the network over time. - + Each rollup on Celestia uses a light node to directly publish and retrieve transaction data.
diff --git a/src/components/AppsCarousel/AppsCarousel.js b/src/components/AppsCarousel/AppsCarousel.js new file mode 100644 index 00000000..3001f814 --- /dev/null +++ b/src/components/AppsCarousel/AppsCarousel.js @@ -0,0 +1,148 @@ +"use client"; + +import Container from "@/components/Container/Container"; +import { Display } from "@/macros/Copy"; +import Icon from "@/macros/Icons/Icon"; +import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG"; +import { useRef } from "react"; +import Slider from "react-slick"; +import "slick-carousel/slick/slick-theme.css"; +import "slick-carousel/slick/slick.css"; + +const AppCard = ({ title, description, image, url, chainIcon }) => ( + +); + +const AppsCarousel = ({ items }) => { + const sliderRef = useRef(null); + + const settings = { + dots: false, + infinite: true, + speed: 500, + slidesToShow: 3, + slidesToScroll: 3, + arrows: false, + centerMode: false, + initialSlide: 0, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 2, + slidesToScroll: 2, + infinite: true, + }, + }, + { + breakpoint: 640, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: true, + }, + }, + ], + }; + + return ( +
+ +
+ + Apps on Celestia + +
+ +
+ + {items.map((item) => ( + + ))} + +
+ +
+
+ + + +
+
+ +
+ ); +}; + +export default AppsCarousel;