Add a public landing page describing Octraban and its live testnet deployment

[priscaenoch]

Problem

The application boots directly into the explorer home; there is no page that explains what Octraban is, who it is for, or that its contracts are live on testnet. New visitors have no context.

What needs to be done

• Add a landing page at / (relocate the current explorer home to /explorer and update navigation and internal links accordingly).
• Sections: project name and tagline; what it does (decode Soroban XDR into human-readable activity, visualize contract relationships, prototype in the sandbox); a "Live on testnet" panel linking the deployed contracts on stellar.expert; a primary call-to-action into the explorer; footer linking the three org repositories.
• Live testnet links to include:
  • Explorer/registry contract: CBKPNRQ4D3KTAAE7MMJ4HL6JNF2J2EBG2PSSRW4YHOMHTRHUU734CFWJ
  • Ticket contract: CDX3V6OE72KUIEEJTBLFCQZFXZCAKOYWYXK2KPRM57M6FLZFAVUSVL42
  • Explorer link format: https://stellar.expert/explorer/testnet/contract/<id>
• Responsive and theme-aware; keep the existing look and feel.

Files

• new src/pages/Landing.tsx
• src/App.tsx (routing), src/components/Nav.tsx (navigation)

Acceptance deliverables

• Landing renders at /; the explorer is reachable at /explorer.
• The testnet panel shows both contract links with correct stellar.expert hrefs.
• Layout works on mobile and desktop.

Tests to pass

• Test: landing renders the tagline and the primary CTA linking to /explorer.
• Test: both testnet contract links are present with the expected href values.

[jrcity]

I would like to contribute by designing and implementing a dedicated public landing page for Octraban that introduces the project, showcases its capabilities, and provides a clear entry point into the explorer.

Based on the issue description, the application currently opens directly into the explorer experience. While this works well for returning users, it provides little context for first-time visitors. A landing page should communicate the project's purpose, highlight its key capabilities, establish credibility by showcasing its live testnet deployment, and guide users naturally into the explorer.

My goal is to create a landing page that integrates seamlessly with the existing design system while improving the onboarding experience for developers, contributors, and anyone discovering the project for the first time.

Proposed Implementation

1. Introduce a Dedicated Landing Page

I will create a new page:

src/pages/Landing.tsx

This page will become the application's root route (/) while preserving the existing explorer functionality under /explorer.

Rather than rebuilding the application's styling from scratch, I will reuse the existing UI components, spacing, typography, and color system so that the landing page feels like a natural extension of the current application.

2. Update Routing

I will modify src/App.tsx to introduce the new route structure:

/ → Landing page
/explorer → Existing explorer home

All internal navigation and links that previously assumed the explorer was at the root will be updated accordingly to prevent broken navigation.

This preserves existing functionality while providing a much clearer entry point into the application.

3. Update Navigation

The navigation component (src/components/Nav.tsx) will be updated to support the new structure.

This includes:

Home
Explorer
appropriate active navigation state
updated internal routing
preserving responsiveness across screen sizes

The objective is to make navigation intuitive without disrupting the current user experience.

4. Build the Landing Page Sections

The landing page will include the sections outlined in the issue while presenting them in a clean, developer-focused layout.

Hero Section

The hero will introduce:

Octraban
a concise tagline
a brief explanation of its purpose
a prominent call-to-action directing users into the explorer

This should immediately communicate what the project is and encourage exploration.

What Octraban Does

A dedicated feature section will explain the platform's core capabilities, including:

decoding Soroban XDR into human-readable activity
visualizing smart contract relationships
prototyping and experimenting within the sandbox environment

These capabilities will be presented in a way that is understandable to both experienced Stellar developers and newcomers.

Live on Testnet

One of the most important additions is a dedicated panel highlighting that Octraban is already deployed on the Stellar testnet.

This section will include links to both deployed contracts using the required Stellar Expert format:

Explorer / Registry Contract
Ticket Contract

Each link will use the provided contract IDs and direct users to the appropriate Stellar Expert page.

This provides immediate credibility and allows users to inspect the deployed contracts directly.

Primary Call-to-Action

The landing page will include a clear and visually prominent call-to-action that directs visitors into the explorer located at:

/explorer

This ensures the landing page serves as an introduction without creating unnecessary friction before users reach the application's primary functionality.

Footer

The footer will contain links to the three organization repositories specified by the project.

The footer styling will match the existing application theme while remaining clean and minimal.

5. Responsive and Theme-Aware Design

The implementation will follow the application's existing responsive design patterns.

The layout will be optimized for:

desktop
tablet
mobile devices

It will also respect the application's current theme system, ensuring compatibility with both light and dark modes where applicable.

The objective is to make the landing page feel like a native part of the project rather than an isolated marketing page.

6. Maintain Existing Design Language

Rather than introducing a completely different visual style, I will build the landing page using the project's existing:

components
spacing system
typography
color palette
button styles
card layouts

This minimizes maintenance overhead while ensuring visual consistency throughout the application.

7. Testing

To satisfy the acceptance criteria, I will implement tests covering the key user flows.

The tests will verify:

the landing page renders successfully at /
the project tagline is displayed
the primary call-to-action correctly links to /explorer
both testnet contract links are present
each link points to the expected Stellar Expert URL
existing application tests continue to pass after the routing changes
Expected Outcome

Upon completion:

Visitors will land on a dedicated introduction page rather than entering the explorer without context.
The explorer will remain fully accessible at /explorer.
Users will immediately understand what Octraban is, what problems it solves, and who it is intended for.
The live testnet deployment will be clearly visible through direct links to Stellar Expert.
Navigation will remain intuitive and consistent across the application.
The landing page will be fully responsive, theme-aware, and aligned with the existing design language.
Automated tests will verify the new routing and the required landing page elements.

Why I Am a Good Fit

I have experience building React and TypeScript applications with a strong focus on user experience, component architecture, and responsive interfaces. Beyond implementing features, I pay close attention to information architecture and first-time user onboarding, ensuring that applications are both technically robust and easy to understand. For this contribution, my goal is to deliver a landing page that integrates seamlessly with Octraban's existing interface while providing new visitors with the context, confidence, and clear navigation needed to begin exploring the platform.

[grantfox-oss]

🦊 GrantFox — @jrcity has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #6)
2. Your PR will be reviewed by the octraban maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@jrcity's PR #34 was approved and merged by @priscaenoch.

🏆 @jrcity: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (83 total points). Track your full progress on GrantFox.

👏 Great work, @jrcity! Keep contributing to octraban.