[Frontend] PoweredByLanding Component

[aguilar1x]

🎯 Objective

Implement the PoweredByLanding section for the landing page, showcasing the benefits of using Scaffold Rust with Soroswap for Stellar development.

---

🏗 Component Structure

apps/webapp/components/home/powered-by-landing.tsx

Integration:

• Render below the SetupLanding component in apps/webapp/app/(landing)/page.tsx.

---

🗂 Requirements

PoweredByLanding

Top Elements:

• Badge (small pill): “⚡ Powered by Scaffold Rust” — yellow text on a subtle background pill.

• Headline: Built with the Best Tools for Stellar Development

  • "Stellar Development" highlighted in yellow.

• Description:
  Scaffold Rust provides production-ready templates and tools to maximize developer efficiency. This Soroswap integration showcases the power of our platform.

Feature Items (3-column grid):

1. Clean Code

   • Icon: Code brackets inside purple circle background.
   • Description: Production-ready, well-documented code following best practices.

2. Modular Design

   • Icon: Stack layers inside purple-pink circle background.
   • Description: Reusable components and clear separation of concerns.

3. Fast Deployment

   • Icon: Rocket inside purple-pink circle background.
   • Description: Deploy to production in minutes with our optimized templates.

Buttons:

• Primary: “Visit Scaffold Rust” (solid, blue background).
• Secondary: “Explore More Templates” (outlined, white text).

Layout:

• Background: Gradient from blue (#0052cc approx.) to magenta (#d60087 approx.).
• Center-aligned text and icons.
• Desktop: 3 columns; Mobile: stacked vertically.
• Spacing consistent with design (padding top/bottom ~ 80px).

Accessibility:

• Ensure sufficient color contrast on gradient background.
• Buttons are keyboard-focusable and accessible.

---

🎨 Design & Tokens

• Headline: text-3xl md:text-4xl font-bold text-white text-center.
• Feature icons: 48x48px, consistent padding and rounded-full.
• Buttons: large, rounded-md, hover state with subtle scale effect.

---

✅ Acceptance Criteria

• Matches the provided design for background, typography, icons, and spacing.
• Fully responsive at 360 / 768 / 1024 / 1280.
• No TypeScript or console warnings.
• Used only on the landing page.

---

🔗 Reference

Figma design

[SudiptaPaul-31]

I would love to work on this issue May I be assigned to this task please

Recommended by OnlyDust for outstanding experience and quality contributions.

[Stealth-cloud-droid]

I would like to work on this issue.
I will also use my knowledge to solve the issue
Recommended by OnlyDust for high-quality contributions.