[Frontend] CTALanding Component #7
Description
🎯 Objective
Implement the CTALanding section for the landing page, providing a clear call-to-action for users to start building on Stellar using the Soroswap integration template.
🏗 Component Structure
apps/webapp/components/home/cta-landing.tsxIntegration:
- Render below the PoweredByLanding component in
apps/webapp/app/(landing)/page.tsx.
🗂 Requirements
CTALanding
Content:
-
Headline: Ready to Build on Stellar?
- "Stellar" highlighted with a purple gradient text.
-
Subtext: Get started with our Soroswap integration template and launch your DeFi application today.
Buttons:
- Primary Button: “Try Live Demo” — solid blue background, white text, lightning icon.
- Secondary Button: “Clone Template” — white background, black text, GitHub icon.
Layout:
- Center-aligned headline, subtext, and buttons.
- Adequate vertical spacing between elements.
- Buttons horizontally aligned with ~16px gap on desktop; stacked vertically with ~12px gap on mobile.
Accessibility:
- Buttons must be keyboard-focusable and include descriptive
aria-labels. - Color contrast must meet WCAG standards.
🎨 Design & Tokens
- Headline:
text-2xl md:text-3xl font-bold text-center. - Subtext:
text-gray-500 text-center mt-2. - Buttons: large size, rounded-md, hover with subtle scale effect.
✅ Acceptance Criteria
- Matches the provided design for typography, spacing, and button styles.
- Fully responsive at 360 / 768 / 1024 / 1280.
- No TypeScript or console warnings.
- Used only on the landing page.
🔗 Reference
