Merge pull request #32 from Zondax/dev

Adds faucet section to developers page

Author: ayelenmurano

biome.json

@@ -23,6 +23,18 @@
 			"quoteStyle": "double"
 		}
 	},
+	"css": {
+		"parser": {
+			"cssModules": true,
+			"tailwindDirectives": true
+		},
+		"formatter": {
+			"enabled": true
+		},
+		"linter": {
+			"enabled": false
+		}
+	},
 	"assist": {
 		"enabled": true,
 		"actions": {

package-lock.json

@@ -4,6 +4,7 @@ import { ChainSpecsSection } from "@/components/sections/ChainSpecsSection";
 import { ComparisonSection } from "@/components/sections/ComparisonSection";
 import {
 	DevelopersHeroSection,
+	FaucetSection,
 	RpcEndpointsSection,
 } from "@/components/sections/developers";
 import { ResourcesSection } from "@/components/sections/ResourcesSection";
@@ -19,6 +20,7 @@ export default function DevelopersPage() {
 		<div className="min-h-screen bg-background text-foreground">
 			<FloatingNav />
 			<DevelopersHeroSection />
+			<FaucetSection />
 			<RpcEndpointsSection />
 			<ChainSpecsSection />
 			<ComparisonSection />

src/app/developers/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { FaucetCard } from "@/components/shared/FaucetCard";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DEVELOPERS_PAGE_CONTENT } from "@/constants/developers";
+import { Droplets, ExternalLink, Sparkles } from "lucide-react";
+
+export function FaucetSection() {
+	return (
+		<section id="faucet" className="section-primary py-24">
+			<div className="max-w-7xl mx-auto px-6">
+				<div className="text-center mb-16">
+					<h2 className="text-4xl md:text-5xl font-bold mb-6">
+						{DEVELOPERS_PAGE_CONTENT.faucet.title}
+					</h2>
+					<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+						{DEVELOPERS_PAGE_CONTENT.faucet.description}
+					</p>
+				</div>
+
+				<div className="grid gap-6 max-w-4xl mx-auto">
+					{DEVELOPERS_PAGE_CONTENT.faucet.faucets.map((faucet) => (
+						<FaucetCard
+							key={faucet.name}
+							icon={Droplets}
+							title={faucet.name}
+							subtitle={
+								<div className="flex items-center gap-1 text-sm text-muted-foreground">
+									<Sparkles className="w-3 h-3" />
+									<span>Free testnet tokens</span>
+								</div>
+							}
+							description={faucet.description}
+							action={
+								<Button asChild size="lg" className="group w-full md:w-auto">
+									<a
+										href={faucet.url}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<Droplets className="mr-2 h-5 w-5" />
+										Get Test Tokens
+										<ExternalLink className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+									</a>
+								</Button>
+							}
+						>
+							<div className="flex flex-wrap gap-2">
+								{faucet.networks.map((network) => (
+									<Badge key={network} variant="secondary" className="text-xs">
+										{network}
+									</Badge>
+								))}
+							</div>
+						</FaucetCard>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

src/components/sections/FaucetSection.tsx

@@ -1,2 +1,3 @@
 export { DevelopersHeroSection } from "./DevelopersHeroSection";
+export { FaucetSection } from "./FaucetSection";
 export { RpcEndpointsSection } from "./RpcEndpointsSection";