Skip to content

Components · 11

Marketing & layout

Landing-page sections and page furniture. The one place where motion is allowed to be expressive, and still respects reduced motion.

Hero

The opening of a landing page. The headline rises word by word, then the copy and actions follow.

Property management

Collect rent on time without chasing anyone.

Arise UI sends reminders, accepts UPI and cards, and reconciles every payment for you.

  • Words rise + un-blur, 60ms apart
  • Copy 450ms ease-out
  • Glows drift 9–12s loop
import { Hero, HeroAction } from "@/components/ui/hero";

Bento grid

Feature cards in mixed sizes. They rise in one after another as the grid scrolls into view; hover a card to lift it, follow the pointer with a soft light, and play its artwork.

Rent on autopilot

Tenants pay by UPI or bank transfer, and every payment lands in the vault matched to the right flat.

How collection works

Auto reminders

A nudge before rent is due, a thank-you when it lands.

Documents, sorted

Leases, KYC and receipts, filed under each tenant.

  • Cards stagger in 70ms, 450ms ease-out
  • Hover lift 4px 200ms
  • Spotlight follows pointer
  • Artwork plays its own hover
import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";

Reveal

Blocks fade up as they scroll into view, once. Scroll inside the box.

Scroll down ↓

Online rent collection

UPI, cards and net banking in one link.

Automatic reminders

Polite nudges three days before rent is due.

Document vault

Leases and ID proofs, searchable and secure.

Live reports

Occupancy and cash flow, updated daily.

Tenant portal

Tenants pay, raise requests and download receipts.

Bank-grade security

Encrypted at rest and in transit.

  • Fade + 24px rise
  • 450ms ease-out
  • Plays at 15% visible
import { Reveal, AnimatedHeadline } from "@/components/ui/reveal";

Marquee

An endless row of customer names that pauses when you hover. Pure CSS.

Oakridge RealtyBrightwater PMMaple Court HomesSilverline EstatesUrban NestGreenfield Rentals
Greenfield RentalsUrban NestSilverline EstatesMaple Court HomesBrightwater PMOakridge Realty
  • Linear 28s loop
  • Second row reversed
  • Edge fade mask
import { Marquee } from "@/components/ui/marquee";

Beam

Shows something moving between parts of a system. Here, rent flows into the vault and back out. Each pulse leaves a short trail; the hub breathes while it receives. Switch to Lines only for still connectors (pulse={false}).

Rent paid by UPI, bank transfer or cash flows into Arise UI, which records it in the ledger, sends the tenant a receipt and pays the owner.
UPI
Bank transfer
Cash
Arise UI
Ledger
Receipt
Owner payout
  • Pulse travels 1.6s ease-in-out
  • Staggered 150ms
  • Hub halo 2.4s loop
  • Reduced motion: solid lines, no pulse
import { Beam, BeamNode } from "@/components/ui/beam";

Countdown

Time left until an offer ends. Each digit rolls as it changes.

Diwali offer ends in
--
Days
:
--
Hours
:
--
Mins
:
--
Secs
  • Digit roll 300ms ease-out
  • Ticks every second
import { Countdown } from "@/components/ui/countdown";

Newsletter form

Collects an email. On success the button shrinks into a check.

Get the monthly landlord brief

One email a month. Unsubscribe anytime.

  • Invalid: shake
  • Button morph: gentle spring
  • Check pop
import { NewsletterForm } from "@/components/ui/newsletter-form";

Cookie banner

Consent prompt that slides up and leaves once answered.

  • In: slide up 450ms ease-out
  • Out: 300ms ease-in
import { CookieBanner } from "@/components/ui/cookie-banner";

Reading progress

A thin bar showing how far through an article you are. Scroll inside the box.

How to set rent for a new listing

Start with three recent rentals in the same building or street. Listing sites show asking prices, but ask a local broker what units actually rented for.

Adjust for what tenants pay extra for: floor, parking, furnishing, and whether maintenance is included.

Price slightly below the top of the range if you want the unit filled within two weeks. Every vacant month costs about 8% of a year's rent.

Review the rent at renewal. A 5 to 8 percent increase is common in most Indian cities; anything above that should come with an improvement.

Write the rent, the deposit and the increase clause into the lease so both sides know what to expect.

  • Tied to scroll
  • Smoothed with a spring
import { ReadingProgress } from "@/components/ui/reading-progress";

Testimonials

Customer quotes that crossfade every 6 seconds or when you pick a dot.

“We stopped chasing tenants on WhatsApp. Rent now lands by the 3rd, every month.”
MDMorgan DavisOwner, 14 flats in Chennai
  • Crossfade + 8px rise 450ms
  • Active dot stretches: spring
  • Pauses on hover
import { Testimonials } from "@/components/ui/testimonials";