🎯 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.tsx
Integration:
- Render below the PoweredByLanding component in
apps/webapp/app/(landing)/page.tsx.
🗂 Requirements
CTALanding
Content:
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
Figma design
🎯 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
Integration:
apps/webapp/app/(landing)/page.tsx.🗂 Requirements
CTALanding
Content:
Headline: Ready to Build on Stellar?
Subtext: Get started with our Soroswap integration template and launch your DeFi application today.
Buttons:
Layout:
Accessibility:
aria-labels.🎨 Design & Tokens
text-2xl md:text-3xl font-bold text-center.text-gray-500 text-center mt-2.✅ Acceptance Criteria
🔗 Reference
Figma design