[Frontend] FeaturesLanding Component

[aguilar1x]

🎯 Objective

Build the FeaturesLanding section for the landing page, showcasing the main benefits and functionalities of the DeFi template.

---

🏗 Component Structure

apps/webapp/components/home/features-landing.tsx

Integration:

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

---

🗂 Requirements

FeaturesLanding

Top Elements:

• Badge (small pill): “✨ Template Features” — subtle gradient or soft background.

• Headline: Everything You Need for DeFi Success

  • "DeFi Success" highlighted in purple/magenta.

• Description:
  Our template includes all the essential components to build a professional DeFi application on Stellar.

Features Grid (4 items):

1. Instant Token Swaps

   • Icon: Lightning bolt (blue gradient background).
   • Description: Lightning-fast token exchanges with minimal slippage and competitive rates.

2. Liquidity Pools

   • Icon: Droplet (purple/pink gradient background).
   • Description: Earn fees by providing liquidity to trading pairs on Stellar network.

3. Yield Farming

   • Icon: Upward arrow (green gradient background).
   • Description: Maximize returns through automated yield farming strategies.

4. Secure & Audited

   • Icon: Shield (orange/red gradient background).
   • Description: Built on Stellar’s secure network with audited smart contracts.

Layout:

• Desktop: 4-column responsive grid.
• Mobile: 1-column → Tablet: 2-column.
• Feature cards: rounded-xl, shadow, hover-lift effect (transform scale-105), light background, centered text.

Accessibility:

• Icons have descriptive aria-labels.
• Proper heading hierarchy.

---

🎨 Design & Tokens

• Headline: text-3xl md:text-4xl font-bold text-center.
• Badge: rounded-full, padding-x small, text-sm, gradient text or subtle color fill.
• Descriptions: text-gray-500 text-sm md:text-base.
• Icons: 48x48px, centered, colored backgrounds with subtle shadows.

---

✅ Acceptance Criteria

• Matches the provided design for badge, headline, descriptions, and cards.
• Fully responsive at 360 / 768 / 1024 / 1280.
• No TypeScript or console warnings.
• Used only on the landing page.

---

🔗 Reference

Figma design

[Sandijigs]

Hi , My name is Sandra , a full stack engineer with over 5 years of experience and a smart contract developer with over 2 years of experience. . I would like to work on this issue

[CMI-James]

Hey I am Michael, a frontend developer and I have read the issue description and I would love to take it on.

ETA: 8 hours.

[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.

[Sendi0011]

I will like to work on this task.
ETA: 10 hours

Recommended by OnlyDust for exceptional experience, quality, and reliability.

[aguilar1x]

Hi, the issue has been assigned to you, you can start working on it now. You have to report your progress in less than 2 days, this in order to be aware that the contributor is developing the issue.


If you have any questions, don't hesitate to ask! 🚀


@Stealth-cloud-droid

[aguilar1x]

Any updates? @Stealth-cloud-droid

[Stealth-cloud-droid]

'Working on it @aguilar1x