Landing Page Redesign

[Sharqiewicz]

📋 Summary
This PR implements a comprehensive redesign of the Vortex Landing Page, aiming to improve the visual identity and user experience of the application's entry point. It addresses multiple tracked issues to enhance the initial user interface.​

🎯 Key Changes

Implements a complete visual redesign of the Landing Page interface

Resolves reported issues #860, #842, and #841 related to the landing page logic or layout​

Updates UI components to align with the new design specifications

📛 Breaking changes: New routing system

🆙 Dependencies: tanstack-router, lottie-react, updated daisyui

✅ Review Focus Areas

• Visual regression testing across different screen sizes (responsiveness)​

• Verification of all call-to-action (CTA) buttons and navigation links

• URL params/guards testing

• translations testing (missing pt-BR)

[netlify]

✅ Deploy Preview for vortexfi ready!

Name	Link
🔨 Latest commit	b4b39b3
🔍 Latest deploy log	https://app.netlify.com/projects/vortexfi/deploys/6949431b66806a000842ae8c
😎 Deploy Preview	https://deploy-preview-945--vortexfi.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for vortex-sandbox ready!

Name	Link
🔨 Latest commit	b4b39b3
🔍 Latest deploy log	https://app.netlify.com/projects/vortex-sandbox/deploys/6949431be2db6b0008027fdf
😎 Deploy Preview	https://deploy-preview-945--vortex-sandbox.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR implements a comprehensive landing page redesign that introduces a new routing system and reorganizes the application structure for better scalability. The changes include migrating to TanStack Router for type-safe routing, refactoring sections for business and individual audiences, adding comprehensive privacy policy and terms pages, and implementing a new design system with animations.

Key Changes

• Migration to TanStack Router with locale-aware routes and type-safe navigation
• Complete landing page redesign with separate sections for individuals and business users
• Addition of privacy policy and terms & conditions pages with full content
• New design system with Lottie animations, reusable components, and consistent typography
• Footer expansion with comprehensive navigation links and direct buy/sell crypto links

Reviewed changes

Copilot reviewed 97 out of 112 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/shared/src/tokens/utils/helpers.ts	Renamed import from assethubTokenConfig to assetHubTokenConfig for consistency
packages/shared/src/tokens/assethub/config.ts	Renamed export from assethubTokenConfig to assetHubTokenConfig for PascalCase naming
biome.json	Added lottie directory and routeTree.gen.ts to ignore patterns
apps/frontend/vite.config.ts	Added TanStack Router plugin configuration
apps/frontend/src/routes/*	New route files implementing TanStack Router with locale support
apps/frontend/src/translations/*.json	Added extensive translations for privacy policy, terms, business pages
apps/frontend/src/components/*	New reusable components for animations, navigation, and layout
apps/frontend/src/sections/*	Reorganized sections into individuals/ and business/ directories
apps/frontend/App.css	Restructured CSS with proper layering and new utility classes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ebma]

On mobile, the icons of this section are a bit cut off.

Also, let's adjust the behaviour of the logo click when we are on the widget page. Going back to the landing page is unexpected for new users, even though we are personally already used to it.

[ebma]

The widget URL parameters are not respected. When a user opens the page with a specific set of URL parameters, the form to select input and output should be skipped.

Example for URL with quote refresh

http://localhost:5173/widget?externalSessionId=my-session-id&network=base&rampType=BUY&callbackUrl=https%3A%2F%2Fwww.example.org%2F&countryCode=BR&cryptoLocked=USDC&fiat=BRL&partnerId=my-partner-id&paymentMethod=pix

Example for URL without quote refresh

http://localhost:5173/widget?externalSessionId=my-session-id&quoteId=e77f3923-3e28-4ad9-9e04-ddb134d0e013&walletAddressLocked=0x00000000000000000000000000000000

We talked about this recently in a sync meeting already. Looking at the URL with quote refresh, we require the following parameters: cryptoLocked, externalSessionId, fiat, inputAmount, network, paymentMenthodandrampType`. Thus, we can assume that if all of them are present in the URL, we don't want to show the form but skip straight to the 'Enter Details' page.

In a perfect world, even subsets of the parameters are supported, eg. partners can only define the fiat and rampType parameters in the URL, and the user would get to the ramp form, but some selectors are disabled. This is a little too much and should be done in a later iteration.

Also, if a user directly opens a widget URL, either with a fixed quote or with the quote refresh parameters, they should not be able to go back to the form but only ever be able to go back as far as the 'Enter Details' page. For convenience, the easiest technical solution to achieve this might be to add an extra flag to the rampState that is only set to true if the user entered the 'Enter Details' page via the form and not with a URL.